bootstrapTable自定义列本地存储

需求分析

近来有这么一个需求，bootstrapTable中可以手动选择显示和隐藏列，当用户选择了哪些列显示哪些列隐藏，用户下次再进入此表格时，能够记录上一次用户的选择，除非清除浏览器的缓存才会重置用户的选择。

思路整理

1. 使用浏览器的本地缓存，把用户隐藏的列存入本地缓存中

//本地缓存定义
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的形式存入本地缓存中
},

完整代码

1. 在公共的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

找到特定id下input框

$(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的形式放入了缓存中