zoukankan      html  css  js  c++  java
  • bootstrap-table翻页时,保留多选框的选中状态

    使用bootstrap时,点击分页时会出现原先选择的行已经不再被选择,解决方法是:
    定义一个全局变量,然后监控【选择,全部选择,取消选择,全部取消选择】事件,并对全局变量进行增删改查,然后再设置【responseHandler】在渲染页面数据之前执行方法,将数据保存!

    var $table;
    var selectionIds = [];    //保存选中ids
    $(function () {
        let ctags = $('#ctag').val();
        let url = '{:url("lists")}?ctags='+ctags;
        $table = $('#suspects-grid').bootstrapTable({
            url: url,
            toolbar: "#suspects-toolbar",
            classes: "table table-hover",
            pagination: true,
            queryParams: function (params) {
                return {
                    offset: params.offset,  //页码
                    limit: params.limit,   //页面大小
                    order: params.order, //排序
                    ordername: params.sort, //排序
                    filter: params.filter,
                };
            },
            sidePagination: 'server',
            buttonsClass: "btn-sm btn btn-sm btn-default",
            striped: true,//cookie開啟
            cookie: true,//cookie的Name
            sortOrder: 'desc',
            cookieIdTable: 'suspectsCI',
            showRefresh: true,
            showColumns: true,
            clickToSelect: true,
            stickyHeader: true,
            stickyHeaderOffsetLeft:  $('#suspects-grid').offset().left + 'px',
            stickyHeaderOffsetRight: $('#suspects-grid').offset().right + 'px',
            filterControl: true,
            pageSize: 10,
            responseHandler:responseHandler, //在渲染页面数据之前执行的方法,此配置很重要!!!!!!!
            columns: [{
                field: 'checkStatus',
                checkbox: true,
            }],
            pageList: [10, 20, 50, 100],
            onUncheckAll : function (rowsAfter,rowsBefore) {
                var ids = [];
                for (var i=0; i<rowsBefore.length; i++ ){
                    ids.push(rowsBefore[i]["id"]);
                }
    
                $.each(ids, function (i, id) {
                    var index = $.inArray(id,selectionIds);
                    if(index!=-1){
                        selectionIds.splice(index, 1);
                    }
                });
            },
        });
    
    
        
    
        //选中事件操作数组
        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};
        //绑定选中事件、取消事件、全部选中、全部取消
        // uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table
        $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) {
                return row.id;
            });
            func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
            selectionIds = _[func](selectionIds, ids);
        });
    
        //取消选中
        $(".filter-control input,.filter-control select").change(function(){
            // $('#contacts-grid').bootstrapTable("uncheckAll");
            selectionIds = [];
        });
    });
    
    
        //表格分页之前处理多选框数据
        function responseHandler(res) {
            $.each(res.rows, function (i, row) {
                row.checkStatus = $.inArray(row.id, selectionIds) != -1;    //判断当前行的数据id是否存在与选中的数组,存在则将多选框状态变为true
            });
            return res;
        }

    BootstrapTable的属性一览表

    url: '/Home/GetDepartment',         //请求后台的URL(*)
    method: 'get',                      //请求方式(*)
    toolbar: '#toolbar',                //工具按钮用哪个容器
    striped: true,                      //是否显示行间隔色
    cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
    pagination: true,                   //是否显示分页(*)
    sortable: false,                     //是否启用排序
    sortOrder: "asc",                   //排序方式
    queryParams: oTableInit.queryParams,//传递参数(*)
    sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
    pageNumber:1,                       //初始化加载第一页,默认第一页
    pageSize: 10,                       //每页的记录行数(*)
    pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
    search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
    strictSearch: true,
    showColumns: true,                  //是否显示所有的列
    showRefresh: true,                  //是否显示刷新按钮
    minimumCountColumns: 2,             //最少允许的列数
    clickToSelect: true,                //是否启用点击选中行
    height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
    uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
    showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
    cardView: false,                    //是否显示详细视图
    detailView: false,                   //是否显示父子表
    columns: [{}]
  • 相关阅读:
    ppt中调整图片位置
    如何理解 Google Protocol Buffer
    g++: error: unrecognized command line option ‘-std=C++11’
    手把手教你如何加入到github的开源世界!
    redis
    maven
    Spring----注释----开启Annotation <context:annotation-config> 和 <context:component-scan>诠释及区别
    JMX学习笔记(一)-MBean
    Redis学习笔记2-redis管道(pipeline)
    Redis学习笔记1-java 使用Redis(jedis)
  • 原文地址:https://www.cnblogs.com/bushui/p/14010222.html
Copyright © 2011-2022 走看看