使用bootstrap-table插件,设置显示隐藏列时,设置保存至cookie或者服务器

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

bootstrap 依赖

• bootstrap-table.js

Bootstrap Table旨在减少开发时间，并且不需要开发人员的特定知识。它既轻量级又功能丰富

• jquery.cookie.min.js

jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie

bootstrap-table 使用方法

　使用 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',
          }]
   });

bootstrap-table 更多使用参数

$('#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',
           }]
       });

bootstrap-table 安装下载

　我们可以通过npm,cdn,下载文件三种方式使用

bootstrap-table 通过npm安装使用

　通过npm或Bower包含Bootstrap Table源CSS和JavaScript文件。

npm install bootstrap-table
bower install bootstrap-table

bootstrap-table 通过cdn安装使用

<linkrel="stylesheet"href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>

bootstrap-table 通过下载源文件安装使用

• gitee
• bootstrap-table