handsontable的一些技巧-CSDN博客

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))
    }
复制代码