bootstrap-table可见列本地记忆缓存

首先，我们要理清思路。我们为什么要做这个（肯定是产品提的啊啊啊啊真是令人头大）

我们怎么做？是在一个电脑上每个用户区分开，还是一个电脑上所有用户都共用一套可见控制？

（代码默认显示x列）A自定义了x列默认不显示，那么B登录以后还是默认显示的，这是前者。

（代码默认显示x列）A自定义了x列默认不显示，那么B登录以后也是默认不显示，这是后者。

我这里是实现了后者，其实工作量是完全一样的

 

首先我们写一下基础缓存相关代码，做到能把数据存入本地浏览器缓存，后续我们需要把列存起来 格式就是上图所示。

//本地缓存定义
var oStorage = {
_Storage: window.localStorage,
// 是否支持缓存
isSupportStorage: function () {
return this._Storage != undefined ? true : false;
},
// 是否有缓存
hasItem: function (item) {
return this._Storage.hasOwnProperty(item);
},
// 获取缓存 key-value形式
getItem: function (item) {
// 将json字符串转成对象或数组
return JSON.parse(this._Storage.getItem(item));
},
// 设置缓存 key-value形式
setItem: function (item, val) {
// 将对象或数组转成json字符串
return this._Storage.setItem(item, JSON.stringify(val));
}
};

 

然后我们写一下表格第一次加载时的代码

// 表格载入成功时执行的函数 tid是表格的ID 必须唯一 field是默认隐藏的字段 实际应用中 我们需要隐藏的并不固定，所以field为应该是一个以,作为分隔的字符串。也可以为空，例如 ""  "A"  "a,b,b" 这样子
function loadSuccess(tid, field,user_id) {
    // 第一次载入时没有缓存，把默认隐藏的列存入缓存中
    if (!(oStorage.isSupportStorage() && oStorage.hasItem(tid+user_id))) {
        var aTmpConfig = field.split(',');//我们把字段分割为数组  如果field=""  那么split不会执行，咱存的也是空 不会报错的
        //console.log(aTmpConfig);//打印看看 可以删掉
        oStorage.setItem(tid+user_id, aTmpConfig);//存入缓存了
    }

    // 从本地缓存中获取用户配置
    var aUserConfHideCols = oStorage.getItem(tid+user_id);//根据ID获取
    //console.log(tid+user_id);
    if (aUserConfHideCols !== "") {
        // 遍历用户配置中的数据
        aUserConfHideCols.forEach(function (sField) {
            if(sField!=="")
            {
                // 通过hideColumn方法隐藏列
                $("#" + tid).bootstrapTable('hideColumn', sField);
            }

        });
    }
    //WidthCallback();//回调一下表头错位问题解决方法。表头错位问题在我上一篇文章 用不到可以删掉。
//https://blog.csdn.net/qq_41610390/article/details/105268309
}

 

然后我们写一下用户自定义设置列显示状态调用的方法

　

// 切换列时执行的函数 tid是表格ID DomId是页面里<table id='xxx'></table>的上一层容器的ID
function columnSwitch(tid, DomId) {
// tid表示表格id，必须唯一
// DomId表示特定id
var aTmpConfig = [];
// 找到特定id下的所有input框，遍历，i表示索引，v表示元素
$("#" + DomId + " .bootstrap-table div.dropdown-menu").find("input").each(function (i, v) {
// 判断未勾选的列，获得字段属性存入定义的数组中
if (!$(v).is(':checked')) {
aTmpConfig.push($(v).attr("data-field"));
}
});
// 通过setItem方法，以key-value形式存入缓存中
oStorage.setItem(tid, aTmpConfig);
WidthCallback();//调用表头错位解决方法 用不到可以删掉
}

 

如果你想每个用户单独设置，那就获取一下你能定位到某一用户的USERID或者username之类的 最好选用后续不会改变的值。拿这个值跟tid拼接成一个新的key 从而达到每个用户相互独立的设置。例如 tid=admin_tableName 或者 tid=user_tableName 这样，不知道各位能不能懂。

然后回到我们页面。

在字段定义的时候，我们一定要加入switchable: true, visible: true 前者代表这一列可以被隐藏或显示，后者表示这一列是默认显示的，注意，即使你想要默认隐藏此列，这里也有设置为默认显示。隐藏需要在下边代码里去实现。否则会造成程序混乱这里不多解释了。因为本质上咱这里整体功能实现是先全部显示，再隐藏某些用户自定义或程序默认隐藏的列

在onLoadSuccess方法里 加入以下一行代码，两个字段在初次加载之后便是隐藏的

loadSuccess("我是此表格的唯一ID","我是字段,我是字段2"); //这里字段可以是0个也可以是很多个，自己灵活安排

用户点击设置某列隐藏活显示之后，在onColumnSwitch方法里加入

columnSwitch("我是表格的唯一的ID", "我是表格父级容器的ID");//后者只需要本页面唯一就好了，前者再次强调是项目内唯一。

 

————————————————

原文链接：https://blog.csdn.net/qq_41610390/article/details/105270503