bootstrap-table 切换页码保留勾选的checkbox

时间:2023-03-10 04:02:12
bootstrap-table 切换页码保留勾选的checkbox

首先该方法除了需要引入bootstrap库和bootstrap-table外,还需要引入一个工具库js:lodash.js    点我

使用时在jquery.min.js、bootstrap.min.js、bootstrap-table.js之后引入 lodash.js

html

<table id="dataShow"></table>

  

#定义一个数组:勾选的结果保留在selections数组中
var selections = [];
$(function () {
     # 注意:该函数定义在jquery初始化里面
$("#dataShow").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.managerInfoId;//注意这里的row.id 中的id指的是列表的主键,替换成你使用的就行了比如 managerInfoId等
}),
func = $.inArray(e.type, ['check', 'check-all']) > - ? 'union' : 'difference';
selections = _[func](selections, ids);
});
}); function responseHandler(res) {
$.each(res.rows, function (i, row) {
# 注意这里的row.id 中的id指的是列表的主键,替换成你使用的就行了比如 managerInfoId
# 注意这里的row.state中的state指的是表格中checkbox那一列定义的filed,替换成你使用的就行了比如 state等
          row.state = $.inArray(row.managerInfoId, selections) !== -;
});
return res;
}

主要代码就上面那些,以下是bootstrap-table初始化代码

var TableInit = function () {
var oTableInit = new Object();
oTableInit.Init = function () {
$("#dataShow").bootstrapTable({
url: "<%=path%>/oa/workTime/getManagerList",
method: 'post', //请求方式(*)
striped: true, //是否显示行间隔色
contentType: 'application/x-www-form-urlencoded',
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
maintainSelected: true,
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: , //初始化加载第一页,默认第一页,并记录
pageSize: , //每页的记录行数(*)
pageList: [, , , ], //可供选择的每页的行数(*)
queryParams: oTableInit.queryParams,
responseHandler: responseHandler, columns: [{
field: 'state',
checkbox: true
}, {
field: 'managerInfoId',
visible: false

我只是简略的贴了出来,注意标红处跟上面代码的关系

bootstrap-table api:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/