扩展bootstrap-table插件，使其在设置显示/隐藏列时，将设置保存至cookie或者服务器端

- 日理万妓 2021-09-14 05:20 280阅读 0赞

扩展bootstrap-table插件。原插件设置显示/隐藏列时只是临时的，也有cookie插件保存设置，但不方便保存到服务器，本插件就是对其进行扩展，默认保存至cookie，提供事件和参数可以将设置保存至服务器。。

# 依赖 #

*  bootstrap-table.js(在此感谢作者为大家奉献这么优秀的插件[bootstrap-table.js][])
 *  jquery.cookie.min.js

# 使用方法 #

使用bootstrap-table插件的bootstrapTable方法进行初始化时，传参数maintainColSwitch:true即可开启保存到cookie的功能。

$('#dataGrid').bootstrapTable({
              url: 'demo.response.json',
              method: 'get',
              sidePagination: 'client', //服务器端用 server
              idField: 'id',
              queryParamsType: '',
              queryParams: '',
              pagination: true,
              showColumns: true,        //启用 设置显示/隐藏 功能按
              maintainColSwitch:true,  //保持显示隐藏列参数,使用默认参数传入 true 即可
              columns: [{
                  field: 'state',
                  checkbox: true,
              },{
                  field: 'id',
                  title:'id',
              },{
                  field: 'name',
                  title:'name',
              },{
                  field: 'price',
                  title:'price',
              }]
       });

可以传入更多参数

$('#dataGrid1').bootstrapTable({
               url: 'demo.response.json',
               method: 'get',
               sidePagination: 'client', //服务器端用 server
               idField: 'id',
               queryParamsType: '',
               queryParams: '',
               pagination: true,
               showColumns: true,
               maintainColSwitch:{
                   cookieKey:'this.table.columns.maintainCol_dataGrid1',//自定义保存进cookie时的key
                   cookieExpires:1,             //自定义过期时间
                   onLoad: function () {         //加载时激发
                       console.log('加载成功'); //columns值为数组如： ['id','name','price']
                   },
                   onSave: function (columns) {  //保存时激发，可以在这里将结果保存到服务器端 
                       console.log(columns); //值为数组，如：['id','name','price']
                   },
                   initShowColumns:[],          //如果是从服务端获取设置，则将服务端值填到这里，这里不为空时将不从cookie获取数据
                                                //值为数组，如：['id','name','price']
               },
               columns: [{
                   field: 'state',
                   checkbox: true,
               },{
                   field: 'id',
                   title:'id',
               },{
                   field: 'name',
                   title:'name',
               },{
                   field: 'price',
                   title:'price',
               }]
           });

# 源码及Demo下载 #

[https://gitee.com/lhtzbj12/bootstrap-table-maintainColSwitch.js][https_gitee.com_lhtzbj12_bootstrap-table-maintainColSwitch.js]

[bootstrap-table.js]: http://bootstrap-table.wenzhixin.net.cn/
[https_gitee.com_lhtzbj12_bootstrap-table-maintainColSwitch.js]: https://gitee.com/lhtzbj12/bootstrap-table-maintainColSwitch.js