Bootstrap table multi-select box paging retention

When using the checkbox function of the bootstrap table, due to the use of server-side paging, when some data is selected on the first page, then click on the second page to select some data, click back to the first page again, and find the originally selected data It has been emptied. The original multi-select box does not support page turning to retain multi-select data.

Solution: When paging, save the originally selected data in a global variable. When turning the page again, determine whether the current page data exists in the saved data array. If it exists, the status is selected. Of course, when you cancel the selection, you also need to delete the corresponding data in the array.

In order to solve this problem, I checked the document on github and found that someone raised this problem, and the author wenzhixin  also wrote a corresponding example to demonstrate. If you want to see the original problem, click to open the link .

Click to open the link if you want to see the example directly

The original example is a table implemented in html and server-side paging. And the related js methods are not perfect, and I have stepped on a lot of pits, so this blog has made relevant changes based on the examples written by the original author, which are shown and explained here:

[javascript]  view plain  copy

1. var  $ table;  
2. var  selectionIds = [];   //Save selected ids  
3. $(function () {  
4.     $table = $("#example1").bootstrapTable({  
5.         contentType: "application/x-www-form-urlencoded; charset=UTF-8" ,      //initialize encoding  
6.         url:'<%=basePath%>/order/queryOrderList',  
7.         method: 'post',  
8.         striped: true ,            // odd-even line gradient table  
9.         pagination: true ,         // show pagination  
10.         clickToSelect: true ,      //whether selected  
11.         maintainSelected:true,  
12.         sidePagination:  "server" ,     //server pagination  
13.         idField:"id",  
14.         pageSize: 10,  
15.         responseHandler:responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!  
16.         columns: [  
17.             {field: 'checkStatus',checkbox: true},  //给多选框赋一个field值为“checkStatus”用于更改选择状态!!!!!  
18.             {field: 'id',visible:false},   
19.             {field: 'orderNumber',title: "订单编号",align:'center',width:'10%'}  
20.         ]  
21.     });  
22.     //选中事件操作数组  
23.     var union = function(array,ids){  
24.         $.each(ids, function (i, id) {  
25.             if($.inArray(id,array)==-1){  
26.                 array[array.length] = id;  
27.             }  
28.              });  
29.             return array;  
30.     };  
31.     //取消选中事件操作数组  
32.     var difference = function(array,ids){  
33.             $.each(ids, function (i, id) {  
34.                  var index = $.inArray(id,array);  
35.                  if(index!=-1){  
36.                      array.splice(index, 1);  
37.                  }  
38.              });  
39.             return array;  
40.     };  
41.     var _ = {"union":union,"difference":difference};  
42.     //绑定选中事件、取消事件、全部选中、全部取消  
43.     $table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {  
44.             var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {  
45.                      return row.id; //你的id的名称是什么 
46.             });  
47.              func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';  
48.              selectionIds = _[func](selectionIds, ids);   
49.      });  
50. });  
51.     //表格分页之前处理多选框数据  
52.     function responseHandler(res) {  
53.           $.each(res.rows, function (i, row) {  
54.               row.checkStatus = $.inArray(row.id, selectionIds) != -1;  //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true  
55.           });  
56.           return res;  
57.     }     

The union and difference methods are not given in the original example, and I implemented them according to my own ideas. At first, this function was not implemented. Later, it was found that a filed field must be added to the checkbox field, which is consistent with the row field changed in the responseHandler method, in order to realize the function.

Reprint https://blog.csdn.net/github_36086968/article/details/60773900