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

2018/03/06 16:29
阅读数 139

首先该方法除了需要引入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']) > -1 ? '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) !== -1;
        });
        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: 1,                      //初始化加载第一页,默认第一页,并记录
                pageSize: 10,                     //每页的记录行数(*)
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
                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/

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部