# bootstrap-table-maintainColSwitch.js

**Repository Path**: lhtzbj12/bootstrap-table-maintainColSwitch.js

## Basic Information

- **Project Name**: bootstrap-table-maintainColSwitch.js
- **Description**: 扩展bootstrap-table插件。原插件设置显示/隐藏列时只是临时的，也有cookie插件保存设置，但不方便保存到服务器，本插件就是对其进行扩展，默认保存至cookie，提供事件和参数可以将设置保存至服务器。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2017-09-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bootstrap-table-maintainColSwitch.js
扩展bootstrap-table插件。原插件设置显示/隐藏列时只是临时的，也有cookie插件保存设置，但不方便保存到服务器，本插件就是对其进行扩展，默认保存至cookie，提供事件和参数可以将设置保存至服务器。。
# 依赖
- bootstrap-table.js(在此感谢作者为大家奉献这么优秀的插件[bootstrap-table.js](http://bootstrap-table.wenzhixin.net.cn/))
- 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);
               },
               initShowColumns:[],          //如果是从服务端获取设置，则将服务端值填到这里，这里不为空时将不从cookie获取数据
                                            //值为数组，如：['id','name','price']
           },
           columns: [{
               field: 'state',
               checkbox: true,
           },{
               field: 'id',
               title:'id',
           },{
               field: 'name',
               title:'name',
           },{
               field: 'price',
               title:'price',
           }]
       });
```