全长行Handsontable

Question

我正在为我的应用程序寻找类似excel的表格，然后在我的搜索中，我看到了这个Handsontable，但我的要求之一就是分组。

Handsontable是否有可能像这样一个长长的行？

Answer 1

我不确定你的'全长排'是什么意思，但有几个选项可能对你有帮助：

Rendering custom html

这允许您操纵标题和单元格。例如：

var $container = $("#example2");
$container.handsontable({
  colHeaders: function (col) {
    switch (col) {
      case 0: //First column header
        return "<b>Bold</b> and <em>Beautiful</em>";

      case 1: //Second column header
        var txt = "Some <input type='checkbox' class='checker' ";
        txt += isChecked ? 'checked="checked"' : '';
        txt += "> checkbox";
        return txt;
    }
  }
});

或

Column stretching

这使您可以拉伸列以将行填充到“全长行”。拉伸最后一列的示例选项：

stretchH: 'last'

Answer 2

我认为您所看到的是合并单元格。有两种不同的方法可以将单元格与HandsonTable合并。

您可以在选项中直接指定所需的合并：

hot = new Handsontable(container, {
    data: myData,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true,
    mergeCells: [
       {row: 0, col: 0, rowspan: 1, colspan: 4}, // for description
       {row: 3, col: 4, rowspan: 2, colspan: 2}, // any other merges
       {row: 5, col: 6, rowspan: 3, colspan: 3}
    ]
});

或创建一个包含所有合并的数组，稍后将其提供给表：

var mergeArr = new Array();
var descriptionMerge = {
    row : 0,
    col : 0,
    rowspan : 1,
    colspan : 4
}
mergeArr.push(descritpionMerge);

hot = new Handsontable(container, {
    data: myData,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true,
    mergeCells: mergeArr
});

行：合并的起始行。
col ：开始合并的col。
rowspan ：将从起始行合并的行数。
colspan ：将从起始col合并的cols数。

在您的情况下，您需要一个全长行，因此您需要以这种方式合并单元格：

{row: yourStartingRow, col: yourStartingCol, rowspan: 1, colspan: lengthOfYourTable}  

HandsonTable文档：http://docs.handsontable.com/0.15.1/demo-merge-cells.html

奖励：如果您想将文本居中在合并的单元格中，只需使用className：“htMiddle”选项。 http://docs.handsontable.com/0.17.0/demo-alignment.html

Answer 3

如果要对标题进行分组，可以使用嵌套标题执行此操作：

代码使用＆＃34; NestedHeaders＆＃34;像这样的标签：

var example1 = document.getElementById('example1');
var hot = new Handsontable(example1, {
  data: Handsontable.helper.createSpreadsheetData(5,10),
  colHeaders: true,
  rowHeaders: true,
  nestedHeaders: [
    ['A', {label: 'B', colspan: 8}, 'C'],
    ['D', {label: 'E', colspan: 4}, {label: 'F', colspan: 4}, 'G'],
    ['H', {label: 'I', colspan: 2}, {label: 'J', colspan: 2}, {label: 'K', colspan: 2}, {label: 'L', colspan: 2}, 'M'],
    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W']
  ]
});

详情请见handsontable documentation