zoukankan      html  css  js  c++  java
  • bootstrap table 复选框选中后,翻页之后保留先前选中数据

    最近做项目,发现使用bootstrap table插件时,如果有复选框选择功能,翻页操作会导致上一页选中的丢失,而api中的 bootstrapTable('getSelections'); 只能拿到当前页的复选框,如果要实现翻页之后保留先前选中数据,需要做下面逻辑处理

        var checkedIds = [] //存放选中的id 
        var checkedNames= [] //存放选中的需要的其他信息,如果只需要id,可以不用这个字段 
        $(function() { 
            $('#bootstrap-table').bootstrapTable({ 
                url:'', 
                search : true, 
                toolbar : '#toolbar', //工具栏 
                sortable: true, //开启排序 
                cache : false, 
                striped : true, 
                singleSelect : false, 
                locale : 'zh-CN', 
                sidePagination : "server", 
                clickToSelect : true, //是否启用点击选中行 
                pagination : true, 
                maintainSelected : true,//如果是客户端分页,这个设为 true 翻页后已经选中的复选框不会丢失 
                pageSize : 10, pageNumber : 1, pageList: [10, 20, 30, 40], 
                showRefresh : true, //是否显示刷新按钮 
                columns :[ 
                    {
                        checkbox: true,// 显示复选框 
                        formatter: function (i,row) { 
                             //判断当前id是否在存放选中id的数组中 
                            if($.inArray(row.id,checkedIds )!=-1){ 
                                return { 
                                     checked : true //如果存在,设置选中 
                                } 
                             }
                        }
                    },
                    { 
                        field : 'name', 
                        title : '名称', 
                    }, 
                ]
            });
            $('#bootstrap-table').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows,pageData){ 
                let datas = $.isArray(rows) ? rows : [rows]; // 点击时获取选中的行或取消选中的行 
                //这里有个特殊情况,当有全选功能时,如果全选然后取消得到的rows值为空数组,所以此时取值取pageData 
                //通过e.type的值判断是否点击的是全选按钮 
                e.type == 'uncheck-all' ? filterData(e.type,allData) : filterData(e.type,datas) 
            }); 
        }); 


    /* 按要求对数据进行过滤,将选中的数据保存 */ 
        function filterData(type,datas){ 
            if(type == 'uncheck-all'){  //当全选取消选中项的时候,获取到当前页所有数据, 
            
                $.each(datas,function(i,v){ 
                    if(v['0']==true){//如果为true说明是选中 
                        checkedIds.indexOf(v.id) == -1 ? checkedIds.push(v.id) : -1; 
                        checkedNames.indexOf(v.name) == -1 ? checkedNames.push(v.name) : -1;
                    }else{//说明是未选中 
                        checkedIds.splice(checkedIds.indexOf(v.id),1); //删除取消选中行 
                        checkedNames.splice(checkedNames.indexOf(v.name),1); 
                    } 
                }); 
                return 
            } 
            if(type.indexOf('uncheck')==-1){ 
                $.each(datas,function(i,v){ // 添加时,判断一行或多行的 id 是否已经在数组里 不存则添加  
                    checkedIds.indexOf(v.id) == -1 ? checkedIds.push(v.id) : -1; 
                    checkedNames.indexOf(v.name) == -1 ? checkedNames.push(v.name) : -1; 
                }); 
            }else{ 
                $.each(datas,function(i,v){ 
                    checkedIds.splice(checkedIds.indexOf(v.id),1);//删除取消选中行 
                    checkedNames.splice(checkedNames.indexOf(v.name),1); 
                }); 
            } 
        } 
    PS:以上js代码可以实现当前页选中之后,即使翻页也会保存上一页选中的数据,翻页之后回到上一页也会回显到表格上去!
            如果是编辑页面,一进入就需要表格回显数据,需要先将checkedIds赋值,但是有时候表格还是没有回显,需要检查id的字段类型,如果一个是Number类型一个是string类型,需要相互转换一下
     
  • 相关阅读:
    JS转义 escape()、encodeURI()、encodeURIComponent()区别详解
    PHP解决搜索时在URL地址栏输入中文字符搜索结果出现乱码
    CMSPRESS-PHP无限级分类2
    CMSPRESS-PHP无限级分类
    HTML5-CSS3-JavaScript(3)
    HTML5-CSS3-JavaScript(2)
    HTML5-CSS3-JavaScript(1)
    CSS3-Hover 效果 展示
    JAVA Socket地址绑定
    JAVA Socket无参构造方法的使用
  • 原文地址:https://www.cnblogs.com/guhonghao/p/14237094.html
Copyright © 2011-2022 走看看