Bootstrap Table 实现 分页选中

1. 支持分页选中，当前页选中、下一页选中等等数组叠加

注：该方式无法做到点击第一页选中全部页数据。支持当前页全选/选几行，下一页再点击全选/选几行，数组内容会叠加。

代码：

columns: [{
		checkbox : true,   // 增加复选框
        formatter : function (value, row, index) {
            if ($.inArray(row.id, selectAllIds) !== -1) {
                return {
                    checked: true  // 设置选中
                }
            }
        }
	}
]
...

$('#bootstrap-table').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows) {
	   var datas = $.isArray(rows) ? rows : [rows];        // 点击时获取选中的行或取消选中的行
	   console.log(datas[0])
	   examine(e.type, datas);                                 // 保存到全局 Set() 里
})

function examine(type,datas){
       if(type.indexOf('uncheck')===-1){
           $.each(datas,function(i,v){
               // 添加时，判断一行或多行的 id 是否已经在数组里 不存则添加　
               selectAllIds.indexOf(v.id) === -1 ? selectAllIds.push(v.id) : -1;
           });
       }else{
           $.each(datas,function(i,v){
               selectAllIds.splice(selectAllIds.indexOf(v.id),1);    //删除取消选中行
           });
       }
       console.log(selectAllIds);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

截图：输出数组[0]元素， 输出数组选中的15行数据id值

2. 服务端分页类型：支持跨页全部选中，但注意特点

• 解释（重要）：
• 服务端分页：即点击每页会提交一次查询请求去获取该页数据。（只获取加载一页）
• 客户端分页：只向后台发一次请求，一次性获取并加载所有页的行数据。

对于表分页采取的是服务端分页类型，当前页数据可以全选中并获取，但是此时后面所有页数据并未查询也并未选中，是无法获取到的。当点击下一页时，responseHandle响应器会识别全选按钮的选中标志然后在加载时选中这一页的数据。

个人认为，这种时候想要在第一页就全选获取所有数据是不现实的，该方式不行。除非你挨个点一下翻页，依次追加到你的全局数组里（存储行id的容器）。

上代码：

// 假设两个按钮
<div class="toolbar">
  <button id="checkAll" class="btn btn-secondary">Check All</button>
  <button id="uncheckAll" class="btn btn-secondary">Uncheck All</button>
</div>

<script>
var  checkAll = false  // 这是是否选中的标志位
var selectAllIds = []  // 全局数组存放行id值

function queryList() {
	var options = {
		...
		responseHandler: responseHandler,
		columns: [
			{
                field: 'state',   // 复选框列名称，自定义即可
                checkbox: true   // 表明使用复选框
            },
            ...   // 其余是你的表字段列定义
		]
	}
	$.table.init(options);
}

$(function() {
	$('#checkAll').click(function () {
            checkAll = true  // 标志位置为true
            $('#bootstrap-table').bootstrapTable('checkAll')
    })
	$('#uncheckAll').click(function () {
      checkAll = false  // 取消全选，标志位置为false
      $('#table').bootstrapTable('uncheckAll')
    })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

官方实现：服务端分页选中

3. 客户端分页类型，支持一次全部选中

由于客户端分页类型是第一次就加载了所有的数据，此时每页的数据都是存在的，那么在第一页全选就会将后面所有页数据都选中。

代码：

<div class="toolbar">
  <button id="checkAll" class="btn btn-secondary">Check All</button>
  <button id="uncheckAll" class="btn btn-secondary">Uncheck All</button>
</div>


<script>
  var $table = $('#table')
  
  function queryList() {
	var options = {
		...
		responseHandler: responseHandler,
		columns: [
			{
                field: 'state',   // 复选框列名称，自定义即可
                checkbox: true   // 表明使用复选框
            },
            ...   // 其余是你的表字段列定义
		]
	}
	$.table.init(options);
}

  $(function() {
    $('#checkAll').click(function () {
      $table.bootstrapTable('togglePagination').bootstrapTable('checkAll').bootstrapTable('togglePagination')
    })

    $('#uncheckAll').click(function () {
      $table.bootstrapTable('togglePagination').bootstrapTable('uncheckAll').bootstrapTable('togglePagination')
    })
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

官方实现：客户端分页选中

4. 总结

1. 方式一本质是监听了bootstrap-table的几个内置触发事件（选中、取消、全选中、全取消），当鼠标点击时，触发对应事件，做后续存储处理等；
2. 方式二利用了表格的分页特点，服务端分页，点击全选中按钮时，将勾选的标志位置为true，然后依次将所有的行前勾选上。本质只能一次性勾选住当前行，当翻到下一页时，数据加载出来的同时responseHandler立马响应将本页行全部勾选上。所以本质上只能勾选上当前页，我们仔细观察可以看出来每到新的一页勾选会稍微落后一点点。
3. 方式三利用了表格客户端分页的特点，是真正的一次就全部勾选并获取到全部勾选的数据。客户端分页的本质就是向后台发起一次请求，拿到全部的数据分页展示。那么全部勾选就可以把所有已加载的页行数据勾选上，也就能拿到所有数据。但是缺陷也有，只适合小数据量，大数据量一次加载会卡到怀疑人生，对服务器压力不可想象。

题外话，自己又突然想到了在服务端分页的情况下，其实可以这样曲线救国：
① 在每次输入筛选条件后，将筛选条件存起来；
② 数据加载出来并点击全选按钮后将筛选条件传参到后台服务端；
③ 在服务端根据筛选条件查询数据库，查到数据；
④ 执行后续操作，如删除。
这样就和服务端全选方式结合，算是实现全选删除的功能了。