Bootstrap table 跨页全选

此代码是针对于bootstrap table中分页的跨页全选。

　　以下是整个bootstrap的定义

　　

       <script type="text/javascript" src="http://cdn.jsdelivr.net/lodash/3.8.0/lodash.min.js"></script>//一定要引用这个js不然文档加载函数中的的_[func]不会生效
　　　　 $table.bootstrapTable({
                method: 'get',
                url: queryUrl,
                toolbar: '#toolbaruser',                //工具按钮用哪个容器
                height: $(window).height() - 220,
                striped: false,                      //是否显示行间隔色
                pagination: true,
                singleSelect: false, //是否多选
                pageSize: 10,
                pageNumber: 1,
                showRefresh: true,
                pageList: [10],
                search: false, //不显示 搜索框
                //                showColumns: true, //不显示下拉框（选择显示的列）
                sidePagination: "server", //服务端请求
                queryParams: queryParams,
                showToggle: true,
                clickToSelect: true,
                responseHandler: responseHandler,  //这里是引用的下面的responseHandler方法

// showExport: true, // exportDataType: "basic", minimunCountColumns: 2, columns: [{ field: 'state', checkbox: true }, { //field: 'Number',//可不加 title: '序号', //标题 可不加  formatter: function (value, row, index) { return index + 1; } } , { title: '流水号', field: 'Id', sortable: true }, { field: 'UserName', title: '用户名', sortable: true }, { field: 'Number', title: '工号/学号', sortable: true }, { field: 'CreateName', title: '创建人', sortable: true }, { field: 'CreateTime', title: '创建时间', sortable: true }, { field: 'State', title: '状态', sortable: true, formatter: function (value, row) { return stateFormatter(value, row); } } ], onLoadSuccess: function () { }, onLoadError: function () { mif.showErrorMessageBox("数据加载失败！"); } });

 

　　在文档就绪函数中添加如下代码：

            $(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) {
                        debugger
                        return row.Id; //注意这里的row.id 中的id指的是列表的主键，替换成你使用的就行了比如 studentId等
                    });
                    debugger
                    func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
                    selectionIds = _[func](selectionIds, ids);

                });
            });

　　添加responseHandler方法

　　　　此方法在bootstrap table中有定义，一定要加上

            function responseHandler(res) {
                debugger
                $.each(res.rows, function (i, row) {

                    //注意这里的row.id 中的id指的是列表的主键，替换成你使用的就行了比如 studentId等
                    row.state = $.inArray(row.Id, selectionIds) !== -1;
                });
                return res;
            }

　　下面是全选按钮以及取消全选的click事件：

　　　　click事件的目的是获取bootstrap table中的所有数据的id

        function checkall() {
            $.ajax({
                //async: false,
                type: "POST",
                data: {
                    State: $("#organization").val(),
                    OrgCode: $("#userrole").val(),
                    RoleCode: $("#name").val(),
                    UserName: $("#number").val()
                },
                url: 'GetAll',
                dataType: 'text',
                success: function (data) {

                    console.log(data)
                    selectionIds.splice(0, selectionIds.length); //清空selectionIds数组
                    var arr = data.split(',');
                    console.log(arr);
                    for (var i = 0; i < arr.length; i++) {
                        selectionIds.push(parseInt(arr[i]));
                    }
                    console.log(selectionIds)
                    query();   //query方法的目的主要是刷新表格
                }
            });
        }

　　function cancel() {

　　　　selectionIds.splice(0, selectionIds.length); //
　　　　console.log(selectionIds)
　　　　query();
　　}

       function query() {
            $table.bootstrapTable('refresh');
        }

　　以上就是bootstraptable的跨页全选，代码没贴完，但是认真读了，是没有问题的。
　　eg：此博客是本人原创，转载请注明出处。