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

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

你可能感兴趣的:(Javascript,Bootstrap,cookie,bootstrap-table,扩展,服务器端,插件)