处理bootstrap-table分页复选框选中获取表单数据

最新推荐文章于 2022-09-29 11:33:09 发布
大头目T
最新推荐文章于 2022-09-29 11:33:09 发布
阅读量1.7k
点赞数
分类专栏：前端文章标签： bootstrap-table分页复选框选中后台拿值问题
本文链接：https://blog.csdn.net/weixin_44315761/article/details/90476060
版权
前端专栏收录该内容
36 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>

	<body>
		<script>
			//保存领用详情ID
			var rowid = [];
			//获取复选框选中的值
			//获取复选框选中的值全选全不选
					$("#xzwztable").on('check-all.bs.table uncheck-all.bs.table',function(e,rows){
						//var a=$("#xzwztable tr td:last-child").text();
						$("#xzwztable tbody tr").each(function(){
							var bool_rowid=true;
							var a=$(this).children().eq(8).text();//获取领用出库详情id
						 	var index=rowid.indexOf(a);
						 	if(index>-1){
						 		for (var i = 0; i < rowid.length; i++) {
									if(rowid[i]==a){
										rowid.splice(i, 1);
										bool_rowid=false;
										break;
									}
								}
						 	}
						 	if(bool_rowid){
								rowid.push(a);//添加选中的元素
							} 
						});
					});
					//单选
					$("#xzwztable").on('check.bs.table uncheck.bs.table', function (e, rows){
						var bool_rowid=true;
						var a=$("#xzwztable tr td:last-child").text();
						console.log(a);
						var index = rowid.indexOf(rows.rid);
						if(index>-1){
							for (var i = 0; i < rowid.length; i++) {
								if(rowid[i]==rows.rid){
									rowid.splice(i, 1);
									bool_rowid=false;
									break;
								}
							}
						}
					if(bool_rowid){
						rowid.push(rows.rid);//添加选中的元素
					} 
						
					});
				//选择物资列表
				$('#xzwztable').bootstrapTable({
					url: '/receive/ofWarehouse?number=' + number, //请求后台的URL（*）
					method: 'get', //请求方式需要get,post需要插件
					toolbar: '#toolbar', //工具按钮用哪个容器
					striped: true, //是否显示行间隔色
					cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
					sortable: true, //是否启用排序
					sortOrder: "asc", //排序方式
					pagination: true, //是否显示分页（*）
					sidePagination: "server", //分页方式：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: "rid", //每一行的唯一标识，一般为主键列
					//showToggle: true, //是否显示详细视图和列表视图的切换按钮
					cardView: false, //是否显示详细视图
					detailView: false, //得到查询的参数
					maintainSelected: true, //如果是客户端分页，这个设为 true 翻页后已经选中的复选框不会丢失 
					queryParams: function(params) {
						var temp = {
							pageSize: params.limit, //页面大小
							pageNo: (params.offset / params.limit) + 1 //页码
						}
						return temp;
					},
					columns: [{
							checkbox: true,
							width: '3%',
							//表单加载时让复选框选中
							formatter: function(value, row, index) {
								var flag_mtl = false;
								for(var i = 0; i < rowid.length; i++) {
									if(row.rid == rowid[i]) {
										flag_mtl = true;
									}
								}
								return {
									checked: flag_mtl
								}
							}
						},
						{
							field: 'materialName',
							title: '物资名称',
						},
						{
							field: 'medquantity', //领用数量
							title: '领用数量',
						},
						{
							field: 'rdpnumber', //出库数量
							title: '出库数量',

						},
						{
							field: 'surplus',
							title: '剩余数量',
							formatter: function(value, rows,
								index) {
								var lynumber = rows.medquantity; //领用数量
								var cknumber = rows.rdpnumber; //出库数量
								var number = lynumber -
									cknumber; //剩余数量
								return number;
							}
						},
						{
							field: 'picture',
							title: '物资图片',
							formatter: function(value, rows,
								index) {
								return "<img src='picture/goodspicture/" + value + ".jpg' width='100px' height='35px'/>"
							}
						}, {
							field: 'pid',
							title: '物资id',
						}, {
							field: 'mid',
							title: '物资领用详情ID',
						}, {
							field: 'rid',
							title: '领用出库详情ID',
						}
					],
					onLoadSuccess: function() {
						//获取选中的领用出库详情id
						$("#confirm").click(function() {
							$.ajax({
								url: "/receive/ofWarehouse2",
								//获取复选框选中值传入后台查询
								data: "rowid=" + rowid,
								success: function(e) {
									$(e).each(function(i, item) {
										$("#lythwzTable tbody").prepend('<tr>' +
											'<td><input type="text" id="Receive_sales_id" class="form-control" readonly="readonly" /></td>' +
											'<td><input type="text" id="Material_id" onblur="number2(this)" class="form-control"  readonly="readonly"/></td>' +
											'<td><input type="text" id="sum" class="form-control" readonly="readonly" /></td>' +
											'<td><input type="text" id="xzwz_sl" class="form-control" readonly="readonly" /></td>' +
											'<td><input type="number" onblur="blured(this)" id="Rsp_number" class="form-control"/></td>' +
											'<td><input type="number" id="tuihuan" class="form-control"/></td>' +
											'<td><input type="text" id="Rsp_cause" class="form-control"/></td>' +
											'<td><input type="text" id="mpid" class="form-control"/></td>' +
											'<td><input type="text" id="mid" class="form-control" style="display:"/></td>' +
											'<td><input type="text" id="rid" class="form-control" style="display:"/></td></tr>');
										$("#Receive_sales_id").val(item.materialName); //物资名称
										$("#Material_id").val(item.medquantity); //领用数量
										$("#sum").val(item.rdpnumber); //出库数量
										$("#xzwz_sl").val(item.medquantity - item.rdpnumber); //剩余数量
										$("#Rsp_number").val(item.rdpnumber); //出库退还数量
										$("#mpid").val(item.pid); //物资id
										$("#Rsp_cause").val("领用物资过多");
										$("#Rsp_number").attr('max', item.rdpnumber);
										$("#tuihuan").attr('max', item.medquantity); //领用退还
										$("#tuihuan").val(0); //领用退还默认值
										$("#mid").val(item.mid); //物资领用详情ID
										$("#rid").val(item.rid); //领用出库详情ID
										//只能输入数字
										$("#Rsp_number").bind("input propertychange", function() {
											if(isNaN(parseFloat($(this).val())) || parseFloat($(this).val()) <= 0) $(this).val(1);
										});
										$("#tuihuan").bind("input propertychange", function() {
											if(isNaN(parseFloat($(this).val())) || parseFloat($(this).val()) <= 0) $(this).val(0);
										});
										//用jquery去掉重复的行
										var tableRows = $('#lythwzTable').find("tbody tr");
										var seens = [];
										for(var i = 0; i < tableRows.length; i++) {
											var tRow = $(tableRows[i]);
											var cell1Content = tRow.find("td:last-child input").val();
											if(seens.indexOf(cell1Content) != -1) {
												tRow.remove();
											} else {
												seens.push(cell1Content);
											}
										}

									});
								}
							});

						});

					}
				});
		</script>
	</body>

</html>