全长排Handsontable答案

【问题标题】：Ful length row Handsontable全长排Handsontable
【发布时间】：2014-07-05 19:10:27
【问题描述】：

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

在 Handsontable 上是否可以有这样的全长行？

【问题讨论】：

标签： handsontable

【解决方案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'

【讨论】：

我想制作一个完整的行，这意味着一行将是整个表格的跨度

【解决方案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
});

row：合并的起始行。
col：合并的起始col。
rowspan：将从起始行合并的行数。
colspan：将从起始列合并的列数。

在你的情况，你想要一个完整的行，所以你需要以这种方式合并单元格：

{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

【讨论】：

【解决方案3】：

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

代码使用“NestedHeaders”标签，如下所示：

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上查看更多信息

【讨论】：

注意：NestedHeaders 需要 PRO 版本的 handsontable。