处理bootstrap-table分页复选框选中获取表单数据
生活随笔
收集整理的這篇文章主要介紹了
处理bootstrap-table分页复选框选中获取表单数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>//保存領用詳情IDvar 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();//獲取領用出庫詳情idvar 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>
?
總結
以上是生活随笔為你收集整理的处理bootstrap-table分页复选框选中获取表单数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： layui复选框怎么取值_layui如何
- 下一篇： 测试辐射发射时，为什么要将天线分为垂直和