使用BootDO框架在js中隐藏表的各个列(框架专用)

代使用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>