handsontable的一些技巧

handsontable

handsontable是一個web化的表格工具（類excel）

這裏不介紹handsontable的文件引入相關問題

1.初始化handsontable實例

var container = document.getElementById("id");
    var hot = new Handsontable(container,options)
複製代碼

其中container是handsontable的容器，options是handsontable的配置obj

2.配置options

配置options，就必須知道其每一個key值所表明的意義，這裏寫一些通用的文件：

var options = {
        data: this.main,//主體內容
        fixedColumnsLeft: 5,//凍結列
        colHeaders: this.delHeader(this.headers), //表頭文案
        columns: this.getType(this.headers), //數據顯示格式
        filters: true, //啓動過濾
        maxRows: this.main.length,//最大行
        height: 300, //容器的高度
        columnSorting: true, //添加排序
        sortIndicator: true, //添加排序
        renderAllRows: true,
        // colWidths: 200,
        autoColumnSize: true, 
        language: "zh-CN", //語言，須要引用包
        manualColumnResize: true,//列寬自動適應
        manualColumnMove: true,//控制列的移動
        dropdownMenu: [ //下拉組件
          "filter_by_condition",
          "filter_by_value",
          "filter_action_bar"
        ],
        contextMenu: {//右鍵菜單
          items: {
            remove_row: {
              name: "刪除選中設備"
            }
          }
        },
        // 事件
        afterChange: this.tdChange, //修改後
        afterFilter: this.trimmedRows, //排序前
        afterRemoveRow: this.romoveFm, //右鍵刪除
        afterOnCellMouseDown: this.eventClick //鼠標點擊
      }
複製代碼

若是想要知道更多的配置項，能夠去hansondtable的文檔看看

3.事件：在hansontable中我使用的主要是修改和排序點擊等功能，如下是相關代碼(這裏的this.hot爲hot的實例對象)：

//表格中的點擊
    eventClick(el, rowArr) {
      //點擊的是表頭
      if (rowArr.row < 0) {
        return;
      }
      //被篩選事後的數組
      let trimmedArr = this.trimmedRows();
      //是否啓用了排序
      let isSort = this.hot.getPlugin("columnSorting").isSorted();
      if (trimmedArr.length && isSort) {
        let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
          .__arrayMap;
        let infos = this.main[trimmedArr[sortArr[rowArr.row]]];
        this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
      } else if (isSort) {
        //排序後的數組
        let sortArr = this.hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
        let infos = this.main[sortArr[rowArr.row]];
        this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
      } else if (trimmedArr.length) {
        let infos = this.main[trimmedArr[rowArr.row]];
        this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
      } else {
        let infos = this.main[rowArr.row];
        this.getInfors(infos, rowArr);
      }
    },
    
    
   /**
     * @param infos 當前行的數據
     * @param row   排序後正確的行號
     * 
     * @return 你想的操做
     */
    getInfors(infos, row) { do something ...}
    //獲取被篩選掉的行號
    trimmedRows() {
    //獲取被篩選掉的行號
      var plugin = this.hot.getPlugin("trimRows").trimmedRows;
      let dataLength = this.main.length;
      let dataArr = new Array();
      for (let i = 0; i < dataLength; i++) {
        dataArr.push(i);
      }
      if (plugin.length <= 0) {
        dataArr = [];
      } else {
        dataArr = this.array_diff(dataArr, plugin);
      }
      return dataArr;
    },
    
    
    //刪除資產
    romoveFm() {
    //copeMain爲刪除以前拷貝的原數據
      let params = tools.differenceArr(this.main, this.copyMain)
    },
    
    //取兩個數組的差值
    tools.differenceArr = (a, b) => {
        return a.concat(b).filter(v => !a.includes(v) || !b.includes(v))
    }
複製代碼

若是有什麼疑問，能夠在評論區留言！