bootstrap-table.js支持用户自定义展示表格的列

前言：

使用bootstrap-table作为后管系统表格框架时，我们可以通过js中“showColumns ”属性，来控制表格列的多少，但是这里存在一个缺点，一旦刷新界面已经隐藏的列就会恢复原样。

 经过查阅资料，有如下思路：我们把每一个用户隐藏的列存入数据库，用户每次调用表格时，先查询数据库中存储的记录，解决用户刷新界面隐藏列复原的问题。

具体步骤：

1.存储隐藏列的表结构设计：

CREATE TABLE `sys_table_columns` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `user_id` bigint(20) DEFAULT NULL COMMENT '用户id',
  `module_name` varchar(50) DEFAULT NULL COMMENT '模块名称',
  `column_name` varchar(50) DEFAULT NULL COMMENT '类名',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8 COMMENT='隐藏列数显示表';

2.相关Java代码： 

------Controller层：-------  
    
   /**
	 * 保存用户自定义隐藏的列
	 */
	@ResponseBody
	@PostMapping("/save")
	public R save(@RequestParam("moduleName") String moduleName,
				  @RequestParam(value = "columnNames[]", required = false)  String[] columnNames){
		try {
			if (StringUtils.isNotBlank(moduleName)) {
				tableColumnsService.save(moduleName, columnNames);
			}
			return R.ok();
		} catch (Exception e) {
			log.error("保存用户自定义的列失败",e);
		}

		return R.error();
	}

	/**
	 * 每次进入页面时，查询到对应的自定义隐藏的column列
	 * @return
	 */
	@ResponseBody
	@PostMapping("/queryByModule")
	public String[] queryByModule(@RequestParam("moduleName") String moduleName){
		return tableColumnsService.listColumnByModuleName(moduleName);
	}

------Service层：-------  

	@Override
	public void save(String moduleName, String[] columnNames) {
		UserDO user = ShiroUtils.getUser();
		Long userId = user.getUserId();
		tableColumnsDao.removeByUserIdAndModuleName(userId, moduleName);
		List<TableColumnsDO> list = new ArrayList<>();
		if (columnNames != null) {
			Arrays.stream(columnNames).forEach(x->{
				TableColumnsDO tableColumns = new TableColumnsDO();
				tableColumns.setUserId(userId);
				tableColumns.setModuleName(moduleName);
				tableColumns.setColumnName(x);
				list.add(tableColumns);
			});
			tableColumnsDao.saveBatch(list);
		}
	}

	@Override
	public String[] listColumnByModuleName(String moduleName) {
		return tableColumnsDao.listColumnNameByUserIdAndModuleName(ShiroUtils.getUser().getUserId(), moduleName);
	}
	
------Dao层：-------  

	/**
	 * 通过userId和moduleName删除集合
	 *
	 * @param userId
	 * @param moduleName
	 */
	@Delete("delete from sys_table_columns where user_id = #{userId} and module_name = #{moduleName}")
	void removeByUserIdAndModuleName(Long userId,String moduleName);

	/**
	 * 通过userId和moduleName查询集合
	 *
	 * @param userId
	 * @param moduleName
	 * @return
	 */
	@Select("select column_name from sys_table_columns where user_id = #{userId} and module_name = #{moduleName}")
	String[] listColumnNameByUserIdAndModuleName(Long userId,String moduleName);

	/**
	 * 批量保存
	 *
	 * @param tableColumnsList
	 * @return
	 */
	int saveBatch(@Param("tableColumnsList") List<TableColumnsDO> tableColumnsList);

3.相关js的代码：

/**
 * 进入每个页面后的列表展示方法
 */
function pageShowColumns(moduleName){
    $.ajax({
        url: '/system/tableColumns/queryByModule',
        type: 'POST',
        data: {
            'moduleName' : moduleName
        },
        success: function (result) {
            var names = new Array();
            names = result;
            //打开页面隐藏列
            hiddenColumns(names);
        }
    });
}

/**
 * 打开页面隐藏列
 * @param names
 */
function hiddenColumns(names) {
    if(names!=''){
        $.each(names, function (i, name) {
            $('#exampleTable').bootstrapTable('hideColumn', name);
        });
    }
}

/**
* 每个页面的列表的表头的个性化配置，在关闭选择后保存到数据库
*/
function pageHiddenColumns(moduleName){
     debugger
    //个性化配置列表的表头，在关闭时将保存到数据库
    $('.keep-open').on({
        "hide.bs.dropdown":  function() {
            var fields=$('#exampleTable').bootstrapTable('getHiddenColumns');
            var columnNames = new Array();
            $.each(fields, function (i, name) {
                columnNames[i] = name['field'];
            });
            $.ajax({
                cache : false,
                type : "POST",
                url : "/system/tableColumns/save",
                data : {
                    'moduleName' : moduleName,
                    'columnNames' : columnNames
                },
                async : false
            });
        }
    });
}

4.使用：

function load() {
	$('#exampleTable').bootstrapTable(
					{
						method : 'get', // 服务器数据的请求方式 get or post
						url : prefix + "/list", // 服务器数据的加载地址
						striped : true, // 设置为true会有隔行变色效果
						dataType : "json", // 服务器返回的数据类型
						pagination : true, // 设置为true会在底部显示分页条
						// queryParamsType : "limit",
						// //设置为limit则会发送符合RESTFull格式的参数
						singleSelect : false, // 设置为true将禁止多选
						iconSize : 'outline',
						toolbar : '#exampleToolbar',
						// contentType : "application/x-www-form-urlencoded",
						// //发送到服务器的数据编码类型
						pageSize : 10, // 如果设置了分页，每页数据条数
						pageNumber : 1, // 如果设置了分布，首页页码
						search : true, // 是否显示搜索框
						showColumns : true, // 是否显示内容下拉框（选择显示的列）
						sidePagination : "client", // 设置在哪里进行分页，可选值

    ...  ...
 

	//配置列表的模块名称
	var moduleName = 'role';
	//启动页面查询数据
	pageShowColumns(moduleName);
	//每次关闭勾选列页面保存隐藏数据
	pageHiddenColumns(moduleName);

    ...  ...

}

Tips：页面不要忘记引用工具的js