今天是:
带着程序的旅程,每一行代码都是你前进的一步,每个错误都是你成长的机会,最终,你将抵达你的目的地。
title

解决bootstarp表格翻页选中项丢失问题

1.表格初始化
       $('#businessTypeTable').bootstrapTable({
           //请求方法
           method: 'post',
           //类型json
           dataType: "json",
           contentType: "application/x-www-form-urlencoded",
           //最低显示2行
           minimumCountColumns: 2,
           //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
           cache: false,
           //排序方式
           sortOrder: "asc",
           //初始化加载第一页,默认第一页
           pageNumber:1,
           //每页的记录行数(*)
           pageSize: 50,
           //可供选择的每页的行数(*)
           pageList: [50, 100],
           responseHandler:responseHandler, //在渲染页面数据之前执行的方法,此配置很重要!!!!!!!
           striped:true,           //奇偶行渐色表
           pagination:true,        //显示分页
           clickToSelect:true,     //是否选中
           maintainSelected:true,
           sidePagination: "server",    //服务端分页
           idField:"id",
           //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
           url: url,
           //默认值为 'limit',传给服务端的参数为:limit, offset, search, sort, order Else
           //queryParamsType:'',
           ////查询参数,每次调用是会带上这个参数,可自定义
           queryParams : function(params) {
               var searchParam = $("#searchForm").serializeJSON();
               searchParam.pageNo = params.limit === undefined? "1" :params.offset/params.limit+1;
               searchParam.pageSize = params.limit === undefined? -1 : params.limit;
               searchParam.orderBy = params.sort === undefined? "" : params.sort+ " "+  params.order;
               return searchParam;
           },
           onContextMenuItem: function(row, $el){
           },

           onClickRow: function(row, $el){
           },
           onShowSearch: function () {
               $("#search-collapse").slideToggle();
           },
           columns: [{
               field:'status',
               checkbox: true
           }, {
               field: 'id',
         visible:false,
      },
               columns
           ]

       });
       //responseHandler(res);
}

2.js处理

var selectionIds = [];  //保存选中ids
$(document).ready(function () {

    //选中事件操作数组
    var union = function(array,ids){
        $.each(ids, function (i, id) {
            if($.inArray(id,array)==-1){
                array[array.length] = id;
            }
        });
        return array;
    };
    //取消选中事件操作数组
    var difference = function(array,ids){
        $.each(ids, function (i, id) {
            var index = $.inArray(id,array);
            if(index!=-1){
                array.splice(index, 1);
            }
        });
        return array;
    };
    var _ = {"union":union,"difference":difference};
    //绑定选中事件、取消事件、全部选中、全部取消
    $("#businessTypeTable").on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
        debugger;
        var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
            return row.id; //你的id的名称是什么
        });
        func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
        selectionIds = _[func](selectionIds, ids);
    });

});


//表格分页之前处理多选框数据
function responseHandler(res) {
    $.each(res.rows, function (i, row) {
        debugger;
        row.status = $.inArray(row.id, selectionIds) != -1;  //判断当前行的数据id是否存在与选中的数组,存在则将多选框状态变为true
    });
    return res;
}

 

参考文档:https://github.com/wenzhixin/bootstrap-table/issues/917

分享到:

专栏

类型标签

网站访问总量