記住分頁checkbox · PHP筆記

[(1條消息) Bootstrap-table中跨頁記住checbox，返回時保留勾選狀態 (多選框分頁保留)\_霄永梓的博客-CSDN博客\_chebox多選之后返回page](https://blog.csdn.net/CapMiachael/article/details/77945086) 搜先需要的js ``` var selectionIds=[];//這個也可以放在初始化表格js的前面,如果放在js文件里需要在頭部加載 var union = function(array,ids){ $.each(ids, function (i, id) { if($.inArray(id,array)==-1){ array[array.length] = id; } }); return array; }; //取消選中事件操作數組 var difference = function(array,ids){ $.each(ids, function (i, id) { var index = $.inArray(id,array); if(index!=-1){ array.splice(index, 1); } }); return array; }; var _ = {"union":union,"difference":difference}; ``` 然后初始化表單時需要如下代碼 ``` // 請求獲取數據后處理回調函數(在加載遠程數據之前，處理響應數據格式) responseHandler: function(res) { $.each(res.data, function (i, row) { //判斷當前行的數據id是否存在與選中的數組，存在則將多選框狀態變為true,注意這里的數據為res.data而不是默認的res.rows row.checkStatus = $.inArray(row.id, selectionIds) != -1; }); //return { data: res.data, total: res.total}; }, ``` 添加初始化事件 ``` // 初始化事件 // 觸發行點擊事件加載成功事件 table.on("check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table load-success.bs.table", function () { // 獲取選中的行的數據id eg:[7, 8] var rows = $.selectColumns("#bootstrap-table",'id'); // 非多個禁用 $('.btn.multiple').toggleClass('disabled', !rows.length); // 非單個禁用 $('.btn.single').toggleClass('disabled', rows.length!=1); }); // 綁定選中事件、取消事件、全部選中、全部取消 table.on("check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table", function (e, rows, rowOrele) { // 復選框分頁保留保存選中數組 if (e.type=='uncheck-all') { // 復選框分頁保留保存選中數組,affectedRowIds:獲取當前頁選中或者取消的行的column值(如ID值) var rowIds = $.affectedRowIds(rowOrele); }else{ var rowIds = $.affectedRowIds(rows); } console.log(rowIds); console.log(e.type); func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference'; selectionIds = _[func](selectionIds, rowIds); console.log(selectionIds); }); ``` >[danger]注意uncheck-all.bs.table與check-all.bs.table的參數是rowsAfter, rowsBefore ``` table.on("uncheck-all.bs.table", function (e, rowsAfter, rowsBefore) { console.log(rowsAfter, rowsBefore); }); ``` ``` <body> <div class="container"> <h1>Maintain selected on server side.(<a href="https://github.com/wenzhixin/bootstrap-table/issues/917" target="_blank">#917</a>).</h1> <table id="table" data-toggle="table" data-pagination="true" data-side-pagination="server" data-url="/examples/bootstrap_table/data" data-response-handler="responseHandler"> <thead> <tr> <th data-field="state" data-checkbox="true"></th> <th data-field="id">ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> </table> </div> <script> var $table = $('#table'), selections = []; $(function () { $table.on('check.bs.table check-all.bs.table ' + 'uncheck.bs.table uncheck-all.bs.table', function (e, rows) { var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) { return row.id;//注意這里的row.id 中的id指的是列表的主鍵，替換成你使用的就行了比如 studentId等 }), func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference'; selections = _[func](selections, ids); }); }); function responseHandler(res) { $.each(res.rows, function (i, row) { //注意這里的row.id 中的id指的是列表的主鍵，替換成你使用的就行了比如 studentId等 row.state = $.inArray(row.id, selections) !== -1; }); return res; } </script> </body> ```