记住分页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> ```