HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-table.css">
<style type="text/css">
td,
th {
text-align: center;
}
a {
text-decoration: none;
cursor: pointer;
}
th {
background-color: #459DF5;
color: white;
}
#table tr:nth-child(even) {
background: #fafafa;
}
#table th {
background: #efefef;
}
</style>
</head>
<body>
<script type="text/javascript" src="bower_components/bootstrap/js/jquery.min.1.12.4.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/js/bootstrap-table.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/js/bootstrap-table-zh-CN.js"></script>
<h1>采购申请</h1>
<div class="modal fade" id="add">
<div class="modal-dialog" style="width: 1000px;">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">物资列表</h4>
</div>
<table id="cgsqtable" style="width: 975px;height: 100px; margin: 10px;"></table>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="confirm" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
<table id="tab" class="table table-bordered" style="width: 975px;height: 45px; margin: 20px;">
<thead>
<tr>
<th>序号</th>
<th>商品编号</th>
<th>物资名称</th>
<th>物资规格</th>
<th>物资数量</th>
<th>物资单位</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="Material_id" class="form-control" readonly="readonly" /></td>
<td><input type="text" id="Material_serial" class="form-control" readonly="readonly" /></td>
<td><input type="text" id="Material_name" class="form-control" readonly="readonly" /></td>
<td><input type="text" id="Material_specification" class="form-control" readonly="readonly" /></td>
<td><input type="number" id="number" class="form-control" /></td>
<td><input type="text" id="Material_unit" class="form-control" readonly="readonly" /></td>
<td>
<!--<input type="button" class="btn btn-default" data-toggle="modal" data-target="#add" value="+" />-->
<button type="button" id="put" class="btn btn-sm" style="background-color: #459DF5; color: white;" data-toggle="modal" data-target="#add">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function() {
$('#cgsqtable').bootstrapTable({
url: 'json/cgsq.json', //请求后台的URL（*）
method: 'get', //请求方式需要get,post需要插件
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
pagination: true, //是否显示分页（*）
sidePagination: "client", //分页方式：client客户端分页(默认)，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页,并记录
pageSize: 5, //每页大小
pageList: [5, 6, 7], //可供选择的每页的行数（*）
//search: true, //是否显示表格搜索
//strictSearch: false, //设为true，开启精确搜索
//showColumns: true, //是否显示所有的列（选择显示的列）
//showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 300, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "cgid", //每一行的唯一标识，一般为主键列
//showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //得到查询的参数
columns: [{
checkbox: true,
width: '3%'
}, {
field: 'Material_id',
title: '物资ID',
}, {
field: 'Material_serial',
title: '物资编号'
}, {
field: 'Material_name',
title: '物资名称'
}, {
field: 'Material_specification',
title: '物资规格'
}, {
field: 'Material_unit',
title: '计量单位'
}],
onLoadSuccess: function() {
$("#confirm").click(function() {
//拿到复选款选中的值
row = $.map($('#cgsqtable').bootstrapTable('getSelections'), function(row) {
return row;
});
var arr = $("#tab tbody tr td:nth-child(2)").children();//获取采购单所有编号
var val = new Array();//定义集合用了保存采购单物资编号
for(var i = 0; i < arr.length; i++) {
val.push($(arr[i]).val());//将采购单编号保存到集合中
if($(arr[i]).val() != "") {//判断编号不为空
for(var j = 0; j < row.length; j++) {//循环复选框选中列
if($(arr[i]).val() == row[j].Material_serial) {//判断表单与复选框物资编号是否相等
//相等就数量加一
var a = $(arr[i]).parent(); //拿到父级元素
$(a).siblings().each(function(i) {//迭代兄弟元素
if(i == 3) {//找第四个兄弟
/*$(this).children().each(function(i){
var sum =Number($(this).val())+1;
$(this).val(sum);
});*/
var num = $(this).children(0).val();//获取数量文本框值
sum = Number($(this).children(0).val()) + 1;//文本框值加一
$(this).children(0).val(sum);//重新为数量文本框赋值
}
});
}
}
}
}
//追加到采购单
for(var i = 0; i < row.length; i++) {
//判断复选框选中的值在表单中是否存在，-1不存在
if(val.indexOf(row[i].Material_serial + "") == -1) {
$("#tab tbody").prepend('<tr>' +
'<td><input type="text" id="Material_id" class="form-control" readonly="readonly"/></td>' +
'<td><input type="text" id="Material_serial" class="form-control" readonly="readonly"/></td>' +
'<td><input type="text" id="Material_name" class="form-control" readonly="readonly"/></td>' +
'<td><input type="text" id="Material_specification" class="form-control" readonly="readonly"/></td>' +
'<td><input type="number" id="number" class="form-control"/></td>' +
'<td><input type="text" id="Material_unit" class="form-control" readonly="readonly"/></td>' +
'<td><button type="button" id="put" class="btn btn-sm" style="background-color: #459DF5; color: white;" data-toggle="modal" data-target="#add"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>' +
'</td></tr>');
$("#Material_id").val(row[i].Material_id);
$("#Material_serial").val(row[i].Material_serial);
$("#Material_name").val(row[i].Material_name);
$("#Material_specification").val(row[i].Material_specification);
$("#Material_unit").val(row[i].Material_unit);
$("#number").val(1);
}
}
});
}
});
});
</script>
<script>
//只能输入数字
$("#number").bind("input propertychange", function() {
if(isNaN(parseFloat($(this).val())) || parseFloat($(this).val()) <= 0) $(this).val('');
});
</script>
</body>
</html>cgsq.json
{
"total": 1,
"rows": [
{
"Material_id": 1,
"Material_serial": 10001,
"Material_name": "华为P30",
"Material_specification": "16",
"Material_unit":"件"
},{
"Material_id": 2,
"Material_serial": 10002,
"Material_name": "荣耀20",
"Material_specification": "16",
"Material_unit":"件"
},{
"Material_id": 3,
"Material_serial": 10003,
"Material_name": "外星人笔记本",
"Material_specification": "16",
"Material_unit":"台"
}
]
}