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) {
	// 第一次载入时没有缓存，把默认隐藏的列存入缓存中
	if (!(oStorage.isSupportStorage() && oStorage.hasItem(tid))) {
		var aTmpConfig = field.split(',');//我们把字段分割为数组  如果field=""  那么split不会执行，咱存的也是空 不会报错的
		console.log(aTmpConfig);//打印看看 可以删掉
		oStorage.setItem(tid, aTmpConfig);//存入缓存了
	}

	// 从本地缓存中获取用户配置
	var aUserConfHideCols = oStorage.getItem(tid);//根据ID获取  
	if (aUserConfHideCols != "") {
		// 遍历用户配置中的数据
		aUserConfHideCols.forEach(function (sField) {
			// 通过hideColumn方法隐藏列
			$("#" + tid).bootstrapTable('hideColumn', sField);
		});
	}
	WidthCallback();//回调一下表头错位问题解决方法。表头错位问题在我上一篇文章 用不到可以删掉。
//https://blog.youkuaiyun.com/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");//后者只需要本页面唯一就好了，前者再次强调是项目内唯一。

end 到这里就结束啦~有问题请留言看到会解答。转载引用标个出处就行了。

2020不秃头！！！！！！