代使用BootDo框架，前端页面中可以自定义展示列
注意其中的clickToSelect，js如下：
$(function() {
load();
});
function load() {
$('#exampleTable')
.bootstrapTable(
{
method : 'get', // 服务器数据的请求方式 get or post
url : prefix + "/list", // 服务器数据的加载地址
// showRefresh : true,
// showToggle : true,
showColumns : true,// 是否显示内容下拉框（选择显示的列）
iconSize : 'outline',
toolbar : '#exampleToolbar',
striped : true, // 设置为true会有隔行变色效果
dataType : "json", // 服务器返回的数据类型
pagination : true, // 设置为true会在底部显示分页条
// queryParamsType : "limit",
// //设置为limit则会发送符合RESTFull格式的参数
singleSelect : false, // 设置为true将禁止多选
// contentType : "application/x-www-form-urlencoded",
// //发送到服务器的数据编码类型
pageSize : 10, // 如果设置了分页，每页数据条数
pageList:[10,20,50],
pageNumber : 1, // 如果设置了分布，首页页码
//search : true, // 是否显示搜索框
sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
clickToSelect: true, // 单击行即可以选中，列表定制化，2018-6-12
queryParams : function(params) {
return {
//说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
pageSize : params.pageSize,
pageNumber : params.pageNumber,
};
},
// //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
queryParamsType : '' ,//返回参数必须包含
// limit, offset, search, sort, order 否则, 需要包含:
// pageSize, pageNumber, searchText, sortName,
// sortOrder.
// 返回false将会终止请求
columns : [
{
checkbox : true
},
{
field : 'code',
title : '订单号'
},
{
field : ...,
title : ...
},
{
field : 'Channel',
title : '渠道'
} ]
});
$('.keep-open').on({
"hide.bs.dropdown": function() {
//"shown.bs.dropdown": function() {
var fields=$('#exampleTable').bootstrapTable('getHiddenColumns');
//var showFields = $('#exampleTable').bootstrapTable('getVisibleColumns');
var names = new Array();
$.each(fields, function (i, name) {
names[i] = name['field'];
});
//1.先删除这个用户这个模块对应的字段 ---参数用用户id和模块名
//2.再重新插入这个用户这个模块对应的字段---names
$.ajax({
cache : false,
type : "POST",
url : "/system/column/saveUserColumn",
data : {
'module' : '模块名',
'column' : names
},
async : false
});
}
});
//启动页面查看到的数据
$.ajax({
url: '/system/column/showUserColumn',
type: 'POST',
data: {
'module' : '模块名'
},
success: function (result) {
var names = new Array();
names = result;
//打开页面隐藏列
hiddenColumns(names);
}
});
}
//打开页面隐藏列
function hiddenColumns(names) {
if(names!=''){
$.each(names, function (i, name) {
$('#exampleTable').bootstrapTable('hideColumn', name);
});
}
}对应的Controller:
/**
* 保存用户自定义隐藏的列
*/
@Log("保存用户自定义的列")
@ResponseBody
@PostMapping("/saveUserColumn")
public R saveUserColumn(String module,@RequestParam("column[]") String[] column){
if( null!=column && column.length!=0 && module.length()!=0){
if(columnService.saveUserColumn(module,column)>0){
return R.ok();
}
return R.error();
}
return R.error();
}
/**
* 每次进入页面时，查询到对应的自定义隐藏的column列
* @return
*/
@Log("查询用户的自定义column列")
@ResponseBody
@PostMapping("/showUserColumn")
public String[] showUserColumn(String module){
String[] columns =columnService.getUserColumns(module);
return columns;
}
对应的serviceImpl:
/**
* 保存用户自定义的具体模块的列名称
* 1.删除已经有的
* 2.插入新的
* @param columns
* @return
*/
@Override
public int saveUserColumn(String module,String[] columns) {
UserDO user = ShiroUtils.getUser();
Long userId = user.getId();
columnDao.removeUserColumn(userId, module);
List<ColumnDO> list = new ArrayList<>();
for (String c: columns) {
ColumnDO columnDO = new ColumnDO();
columnDO.setUserId(userId);
columnDO.setModule(module);
columnDO.setColumn(c);
list.add(columnDO);
}
return columnDao.saveBatch(list);
}
/**
* 获取用户上次的已经隐藏勾选的自定义列：
* @return
*/
@Override
public String[] getUserColumns(String module) {
UserDO user = ShiroUtils.getUser();
List<ColumnDO> list =columnDao.getUserColumns(user.getId(), module);
if(null!=list && list.size()>0){
String[] userColumns = new String[list.size()];
List<String> strList = new ArrayList<>();
for (ColumnDO c : list) {//由于只需要column，则先给一个对象是String的集合
strList.add(c.getColumn());
}
userColumns = strList.toArray(userColumns);//将集合转化为String数组
return userColumns;
}
return null;
}
对应的dao：
/**
* 批量插入，效率大大提高，不过注意mysql默认接受sql的大小是1M
* @param column
* @return
*/
int saveBatch(@Param("columns") List<ColumnDO> columns);
/**
* 删除登陆用户对应的具体模块的列信息
* @param userId
* @param module
* @return
*/
int removeUserColumn(@Param("userId") Long userId,@Param("module") String module);
/**
* 获取用户上次的已经勾选的自定义列的集合
* @param userId
* @param module
* @return
*/
List<ColumnDO> getUserColumns(@Param("userId") Long userId,@Param("module") String module);对应的mapper:
<delete id="removeUserColumn">
delete from pm_column where 1=1 AND user_id = #{userId} AND module = #{module}
</delete>
<insert id="saveBatch">
INSERT INTO pm_column
(
`user_id`,
`module`,
`column`
)
VALUES
<foreach collection ="columns" item="item" separator =",">
(#{item.userId}, #{item.module}, #{item.column})
</foreach >
</insert>
<select id="getUserColumns" resultType="com.biyouxin.pm.column.domain.ColumnDO">
select `id`,`user_id`,`module`,`column` from pm_column
where 1=1 AND user_id = #{userId} AND module = #{module}
</select>