bootstrapTable自定义列本地存储
https://blog.csdn.net/CityHunter_Y/article/details/88995755
需求分析
近来有这么一个需求，bootstrapTable中可以手动选择显示和隐藏列，当用户选择了哪些列显示哪些列隐藏，用户下次再进入此表格时，能够记录上一次用户的选择，除非清除浏览器的缓存才会重置用户的选择。
思路整理
- 使用浏览器的本地缓存，把用户隐藏的列存入本地缓存中
//本地缓存定义
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));
}
};
2.查看前端代码可以发现找到隐藏列的规律
找到隐藏列input框，然后进行判断有没有被勾选
var hideColumn = $(".bootstrap-table ul.dropdown-menu").find('input[data-field="remark"]');
var check = hideColumn.is(":checked");
check为true，对应勾选，勾选的是要显示的列
check为false，对应未勾选，未勾选的是要隐藏的列
3.通过bootstrap中的onLoadSuccess和onColumnSwitch事件来记录用户的选择
// 表格载入成功事件
onLoadSuccess: function () {
// 先判断是否支持浏览器缓存和缓存中是否有数据
// 缓存中有数据时，优先从缓存中读取数据
},// 表格切换列事件，只要显示或隐藏某列就会触发的函数
onColumnSwitch: function () {
// 通过找到隐藏列的规律，将要隐藏的列的field放入到数组中，以key-value的形式存入本地缓存中
},
完整代码
- 在公共的js，比如common.js放入全局变量oStorage ，公共的方法loadSuccess和columnSwitch
//本地缓存定义
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));
}
};
$(function() {
});
// 表格载入成功时执行的函数
function loadSuccess(tid, field) {
// tid表示表格id，必须独一为二
// field表示默认要隐藏的列，没有就填“”
// 第一次载入时没有缓存，默认隐藏的列存入缓存中
if( !(oStorage.isSupportStorage() && oStorage.hasItem(tid+"BsTable"))) {
var aTmpConfig = [field];
oStorage.setItem(tid+"BsTable",aTmpConfig);
}
// 从本地缓存中获取用户配置
var aUserConfHideCols = oStorage.getItem(tid+"BsTable");
if(aUserConfHideCols != "") {
// 遍历用户配置中的数据
aUserConfHideCols.forEach(function (sField) {
// 通过hideColumn方法隐藏列
$("#" + tid).bootstrapTable('hideColumn', sField);
});
}
}// 切换列时执行的函数
function columnSwitch(tid, sId) {
// tid表示表格id，必须独一为二
// sId表示特定id
var aTmpConfig = [];
// 找到特定id下的所有input框，遍历，i表示索引，v表示元素
$("#" + sId + " .bootstrap-table ul.dropdown-menu").find("input").each(function (i,v) {
// 判断未勾选的列，获得字段属性存入定义的数组中
if(!$(v).is(':checked')) {
aTmpConfig.push($(v).attr("data-field"));
}
});
// 通过setItem方法，以key-value形式存入缓存中
oStorage.setItem(tid+"BsTable",aTmpConfig);
}
2.在某一个js中使用，比如user.js
$(function() {
$('#user_table').bootstrapTable({
ajax : "ajaxUserRequest",//自定义ajax
toolbar : '#toolbar', //自定义工具栏
search : true,//开启搜索文本框
sidePagination : "server",//使用服务器端分页
pagination : true,//开启分页
// clickToSelect : true,//开启点击选中
singleSelect : true,// 单选checkbox
striped : true,//斑马线表格
smartDisplay : false, // 显示右下角分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 15,// 每页显示数
pageList: [15,25,50,'All'],//可供选择的每页记录数
paginationPreText : '上一页',
paginationNextText : '下一页',
showColumns : true,
onLoadSuccess: function () {
// 载入成功时执行common.js中loadSuccess方法
// user_table是表格id
// 默认隐藏mrn这一列
loadSuccess("user_table","mrn")
},
onColumnSwitch: function () {
// 切换列时执行common.js中columnSwitch方法
// data_table表示找到此id下的input框，因为列的状态切换不属于表格下的，所以得重新定义一个id
columnSwitch("user_table","data_table")
},
onCheck : checkUserFunction,
onUncheck : checkUserFunction,
onClickRow : single_selection,
columns : data_columns,
});
});
3.功能部分演示
用户要隐藏mrn这一列
前端调试发现local Storage缓存，把需要隐藏的列以key-value的形式放入了缓存中