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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lhtzbj12/article/details/77949992

扩展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