BootstrapTable自定義列本地存儲實(shí)踐

需求：

開放BootstrapTable的自定義表格列功能，前端記錄用戶選擇，即在用戶不清理瀏覽器歷史記錄的情況下，始終顯示用戶上一次的配置。

分析：

因項(xiàng)目基于AngularJS1.5實(shí)現(xiàn)，過濾了一部分老舊版本瀏覽器。所以選擇使用h5的LocalStorage來記錄用戶的配置隱藏的列。

1.查詢Bootstrap Table API，配置項(xiàng)showColumns用來配置是否可配置顯示/隱藏列。

showColumns: true, //顯示下拉框勾選要顯示的列

bootstrap-table.js源碼中，對于showColumns為true時(shí)，監(jiān)聽事件如下：

        if (this.options.showColumns) {
            $keepOpen = this.$toolbar.find('.keep-open');


            if (switchableCount <= this.options.minimumCountColumns) {
                $keepOpen.find('input').prop('disabled', true);
            }


            $keepOpen.find('li').off('click').on('click', function (event) {
                event.stopImmediatePropagation();
            }).find('span').off('checkChange').on('checkChange', function () {
                var ckeck = $(this).find('input').prop('checked');
                $(this)[ckeck ? 'addClass' : 'removeClass']('active');
            });
            $keepOpen.find('input').off('click').on('click', function () {
                var $this = $(this);


                that.toggleColumn(getFieldIndex(that.columns,
                    $(this).data('field')), $this.prop('checked'), false);
                that.trigger('column-switch', $(this).data('field'), $this.prop('checked'));


                $this.parent('span').trigger('checkChange');
            });
        }

可知：通過代碼觸發(fā)<input type="checkbox">的"click"事件，BootStrap Table會自己完成列的隱藏/顯示操作。

    //代碼示例
    $(".bootstrap-table ul.dropdown-menu").find('input[data-field="APPName"]').trigger("click");

2.基于Bootstrap Table DOM結(jié)構(gòu)，可以遍歷查詢獲取已經(jīng)隱藏列的唯一標(biāo)識field。

Bs.Table_DOM結(jié)構(gòu).png

  //代碼示例
  var aTmpConfig = [];
  $(".bootstrap-table ul.dropdown-menu").find("input").each(function (i,v) {
    if(!$(v).parent().hasClass("active")) {
      aTmpConfig.push($(v).attr("data-field"));
    }
  });

3.查詢Bootstrap Table API，有onLoadSuccess事件、onColumnSwitch事件和hideColumn(field)方法，即可在BsTable成功加載數(shù)據(jù)之后觸發(fā)隱藏列操作；在點(diǎn)擊列顯示/隱藏開關(guān)時(shí)，觸發(fā)保存userConfig數(shù)據(jù)。

onLoadSuccess | load-success.bs.table | data | Fires when remote data is loaded successfully.
onColumnSwitch | column-switch.bs.table | field, checked Fires when switch the column visible.
hideColumn | field | Hide the specified column.

······
//代碼示例
onLoadSuccess: function () {
  //get Config from LocalStorage
  $scope.$broadcast('hideColumn'+ '#' + tid, sField);
},
······

4.查詢Bootstrap Table API，有getHiddenColumns方法，獲取所有隱藏的列。在保存userConfig時(shí)可使用該方法。

//附bootstrap-table.js源碼
BootstrapTable.prototype.getHiddenColumns = function () {
  return $.grep(this.columns, function (column) {
    return !column.visible;
  });
 };

設(shè)計(jì)：

初始化：
在Bs.Table的onLoadSuccess事件里，判斷瀏覽器是否支持LocalStorage且用戶是否對該Bs.Table有隱藏列配置，即window.localStorage && window.localStorage.hasOwnProperty(tid+"BsTable")；
獲取該頁面Bs.Table用戶隱藏列唯一標(biāo)識field，即window.localStorage.getItem(tid+"BsTable")；
再通過Bs.Table的hideColumn方法或觸發(fā)<input>標(biāo)簽"click"事件循環(huán)隱藏列。

保存配置：
在用戶離開頁面或者配置顯示、隱藏列時(shí)，通過Bs.Table的getHiddenColumns方法或遍歷Bs.Table的DOM，獲取所有隱藏列的field，存儲在LocalStorage中，即window.localStorage.setItem(tid+"BsTable",sConfig)。

實(shí)現(xiàn)：

• LocalStorage 相關(guān)

var oStorage = {
  _Storage: window.localStorage,
  isSupportStorage: function () {
    return this._Storage != undefined ? true : false;
  },
  hasItem: function (item) {
    return this._Storage.hasOwnProperty(item);
  },
  getItem: function (item) {
    return JSON.parse(this._Storage.getItem(item));
  },
  setItem: function (item,val) {
    return this._Storage.setItem(item,JSON.stringify(val));
  }
};

• Bs.Table配置(建議使用第一種)

//1.使用觸發(fā)<input>標(biāo)簽click事件隱藏列
······
  showColumns: true, //enable show/hide columns menu
  onLoadSuccess: function () {
    //browser supported LocalStorage and has userConfig
    if(oStorage.isSupportStorage() && oStorage.hasItem(tid+"BsTable")) {
      //get userConfig from LocalStorage
      var aUserConfHideCols = oStorage.getItem(tid+"BsTable");
      aUserConfHideCols.forEach(function (sField) {
        $(".bootstrap-table ul.dropdown-menu").find('input[data-field=' + sField 
+ ']').trigger("click");
      });      
    }    
  },
······
//2.使用BsTable hideColumn方法
//這個方法直接隱藏列，不會觸發(fā)下拉框<input>的"click"事件，下拉框里面列仍然為"顯示"狀態(tài)，需要再remove掉active類。
······
  showColumns: true, //enable show/hide columns menu
  onLoadSuccess: function () {
    //browser supported LocalStorage and has userConfig
    if(oStorage.isSupportStorage() && oStorage.hasItem(tid+"BsTable")) {
      //get userConfig from LocalStorage
      var aUserConfHideCols = oStorage.getItem(tid+"BsTable");
      aUserConfHideCols.forEach(function (sField) {
        $scope.$broadcast('hideColumn'+ '#' + tid, sField);
        $(".bootstrap-table ul.dropdown-menu").find('input[data-field=' + sField 
+ ']').parent().removeClass("active");
      });      
    }    
  },
······

• 保存userConfig

//1.用戶配置顯示、隱藏列時(shí)保存userConfig
//1.1BsTable onColmunSwitch事件監(jiān)聽
······
  onColumnSwitch: function () {
    $scope.$broadcast('getHiddenColumns' + '#' + tid, function(aCols) {
      var aTmpConfig = [];
      aCols.forEach(function(col) {
        aTmpConfig.push(col.field);
      });
      oStorage.setItem(tid + "BsTable", aTmpConfig);
    });
  },
······
//1.2DOM 事件監(jiān)聽
$(".bootstrap-table ul.dropdown-menu li").on("click",function () {
  var aTmpConfig = [];
  $(".bootstrap-table ul.dropdown-menu").find("input").each(function (i,v) {
    if(!$(v).parent().hasClass("active")) {
      aTmpConfig.push($(v).attr("data-field"));
    }
  });
  oStorage.setItem(tid+"BsTable",aTmpConfig);
});

//2.在離開頁面時(shí)保存userConfig
//這個無法實(shí)現(xiàn)，在'$destroy'的事件里，BsTable實(shí)例已經(jīng)被銷毀，getHiddenColumns方法沒有正確的返回值。
//$scope.$on('$destroy',function() {
//  $scope.$broadcast('getHiddenColumns'+ '#' + tid, function (aCols) {
//    var aTmpConfig = [];
//    aCols.forEach(function (col) {
//      aTmpConfig.push(col.field);
//    });
//    oStorage.setItem(tid+"BsTable",aTmpConfig);
//  });
//});

Finally.根據(jù)項(xiàng)目環(huán)境，選擇方案如下：

var tid = *****; //項(xiàng)目中BsTable的唯一標(biāo)識id
var oStorage = {
  _Storage: window.localStorage,
  isSupportStorage: function () {
    return this._Storage != undefined ? true : false;
  },
  hasItem: function (item) {
    return this._Storage.hasOwnProperty(item);
  },
  getItem: function (item) {
    return JSON.parse(this._Storage.getItem(item));
  },
  setItem: function (item,val) {
    return this._Storage.setItem(item,JSON.stringify(val));
  }
};
······//此處省略BsTable其他配置BsTableOpt
var uConfigOpt = {
  showColumns: true, //enable show/hide columns menu
  onLoadSuccess: function () {
    //browser supported LocalStorage and has userConfig
    if(oStorage.isSupportStorage() && oStorage.hasItem(tid+"BsTable")) {
      //get userConfig from LocalStorage
      var aUserConfHideCols = oStorage.getItem(tid+"BsTable");
      aUserConfHideCols.forEach(function (sField) {
        $(".bootstrap-table ul.dropdown-menu").find('input[data-field=' + sField 
+ ']').trigger("click");
      });      
    }    
  },
  onColumnSwitch: function () {
    $scope.$broadcast('getHiddenColumns' + '#' + tid, function(aCols) {
      var aTmpConfig = [];
      aCols.forEach(function(col) {
        aTmpConfig.push(col.field);
      });
      oStorage.setItem(tid + "BsTable", aTmpConfig);
    });
  }
}
$.extend(true,BsTableOpt,uConfigOpt);

續(xù)

---上述實(shí)現(xiàn)沒有體現(xiàn)區(qū)分用戶設(shè)置：即在同一pc上，由不同的用戶訪問該表格，對自定義列的配置是一樣?jì)饍旱?，所以建議在保存storage時(shí)，key值增加userName信息。---