Handsontable 常规配置

Question

Handsontable 是一个优秀的在线表格编辑插件，这篇文章分享下 Handsontable 的常规配置项。

固定行列位置

fixedRowsTop: 行数 // 固定顶部多少行不能垂直滚动
fixedColumnsLeft: 列数 // 固定左侧多少列不能水平滚动

拖拽行头或列头改变行或列的大小

manualColumnResize: true/false // 当值为true时，允许拖动，当为false时禁止拖动
manualRowResize: true/false // 当值为true时，允许拖动，当为false时禁止拖动

延伸列的宽度

stretchH: last/all/none // last:延伸最后一列,all:延伸所有列,none默认不延伸。

手动固定某一列

manualColumnFreeze: true/false

当值为 true 时，选中某一列，右键菜单会出现 freeze this column 选项，该选项的作用是固定这一列不可水平滚动，并会将这一列移动到非固定列的前面。再次右键菜单会出现 unfreeze this column，意思是取消该列的固定，并将其还原到初始位置。

拖动行或列到某一行或列之后

manualColumnMove: true/false 当值为true时，列可拖拽移动到指定列
manualRowMove: true/false 当值为true时，行可拖拽至指定行

当属性的值为 true 时，行头或列头可以被拖拽移动，移动后该行或列将会被移动到指定位置，原先该行或列的后面部分自动上移或后退。移动的时候鼠标需选中行线或列线才行。

设置当前行或列的样式

currentRowClassName：当前行样式的名称
currentColClassName：当前列样式的名称

行分组或列分组

groups: [{cols:[0,2]}, {cols:[3,5]}, {rows:[0,4]}, {rows:[5,7]}]

上面的例子介绍了4个分组，第0-2列为一组，第3-5列为第二组，第0-4行为一组，第5-7列为第二组。分组可在行头或列头看见，分组可被展开或隐藏。

允许排序

columnSorting：true/false/对象 // 当值为true时，表示启用排序插件

当值为 true 时，排序插件的使用可通过点击列头文字实现。当值为 false 时表示禁用排序。当值为对象时，该对象包含两个属性：column：列数。sortOrder：true/false，升序或降序，true 为升序排列。当用对象启动插件后可用如下方式禁用插件：

hot.updateSettings({
  columnSorting:false
});

排序的使用也可已直接调用sort()方法实现。如下操作：

if(hot.sortingEnabled){
  hot.sort(行数，true/false); //true为升序，false为降序
}

显示行头列头

colHeaders: true/fals/数组 // 当值为true时显示列头，当值为数组时，列头为数组的值
rowHeaders: true/false/数组 // 当值为true时显示行头，当值为数组时，行头为数组的值

数据显示

data：[[第一行数据],[第二行数据], ...[第n行数据]]/对象数组

• 获取数据的方法：hot.getData()。
• 加载数据的方法：hot.loadData(data)。

当不需要显示某一列的时候可用如下格式设置：

columns：[
  {data:0},
  {data:2}
]

这里就不显示第二列数据，只有第 1、3 列数据

右键菜单展示

contextMenu：true/false/自定义数组 // 当值为true时，启用右键菜单，为 false 时禁用

自适应列大小

autoColumnSize：true/false //当值为true且列宽未设置时，自适应列大小

最大行/最小行

• minCols：最小列数
• minRows：最小行数
• minSpareCols：最小列空间，不足则添加空列
• maxCols：最大列数
• maxRows：最大行数
• minSpareRows：最小行空间，不足则添加空行

observeChanges 插件

observeChanges：true/false // 当值为 true 时，启用 observeChanges 插件

列宽

colWidths:[列宽1，列宽2，...]/列宽值

var hot = new Handsontable(container, {
  data: data,
  observeChanges: true,
  colHeaders: true,
  rowHeaders: true,
  colWidths: 70,
  contextMenu: false,
  manualRowResize: true,
  manualColumnResize: true,
  minSpareRows: 30,
  cells: function(row, col, prop) { // 单元格渲染
    this.renderer = myRenderer;
  },
  mergeCells: true
});

自定义边框设置

可以进行初始化配置，如下：

customBorders:[{range:{from:{row:行数,col:列数},to:{row:行数,col:列数},上下左右设置}]

hot = Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(200, 20),
  rowHeaders: true,
  fixedColumnsLeft: 2,
  fixedRowsTop: 2,
  colHeaders: true,
  customBorders: [{
    range: {//多个单元格
      from: {//起始位置
        row: 1,
        col: 1
      },
      to: {
        row: 3,
        col: 4
      }
    },
    top: {//结束位置
      width: 2,
      color: '#5292F7'
    },
    left: {
      width: 2,
      color: 'orange'
    },
    bottom: {
      width: 2,
      color: 'red'
    },
    right: {
      width: 2,
      color: 'magenta'
    }
  }, { // 单一单元格
    row: 2,
    col: 2,
    left: {
      width: 2,
      color: 'red'
    },
    right: {
      width: 1,
      color: 'green'
    }
  }]
});

也可以声明 customBorder:true，表示允许自定义单元格边框。

单元格合并可以进行初始化配置

mergeCells: [{row: 起始行数, col: 起始列数, rowspan: 合并行数, colspan:合并列数 },...]

也可以先声明单元格允许合并，mergeCells:true，再利用合并方法操作。

hot = new Handsontable(container, {
  data: data,
  observeChanges: true,
  colHeaders: true,
  rowHeaders: true,
  colWidths: 70,
  contextMenu: false,
  manualRowResize: true,
  manualColumnResize: true,
  // minSpareRows: 30,
  cells: function(row, col, prop) {
    this.renderer = myRenderer;
  },
  mergeCells: true,
}

自定义合并

这里以菜单合并按钮触发 beforeChange 为例：

if(key == "merge") {
  if(hot.mergeCells.mergedCellInfoCollection.length > 0) {
    for(var k=0; k<hot.mergeCells.mergedCellInfoCollection.length; k++) {
      if(
        hot.mergeCells.mergedCellInfoCollection[k].row == row &&
        hot.mergeCells.mergedCellInfoCollection[k].col == col
      ) {
        hot.mergeCells.mergedCellInfoCollection.splice(k,1);
        return;
      }else{
        hot.mergeCells.mergedCellInfoCollection.push({
          "row": row,
          "col": col,
          "rowspan": rowspan,
          "colspan": colspan
        });
        break;
      }
    }
  } else {
    hot.mergeCells.mergedCellInfoCollection
      .push({"row": row, "col": col,
      "rowspan": rowspan, "colspan": colspan});
  }
}

注意：hansontable 将合并的单元格单独拿出来放到了 mergeCells 数组的 mergedCellInfoCollection 集合中，所以对合并的操作也是增删集合中的对象。并重新渲染。

使用插件的 merge

let mergePlugin =hot.getPlugin("MergeCells");
mergePlugin.merge(1,3,2,4); //合并1行3列到2行4列

需注意：使用插件合并时，必须保证初始化 hot 时 mergeCells 存在。