全长排Handsontable

Posted 2023-03-22

【中文标题】全长排Handsontable

【英文标题】：Ful length row Handsontable

【发布时间】：2014-07-05 19:10:27

【问题描述】：

我正在为我的应用寻找一个类似 excel 的表格，然后在我的搜索中我看到了这个 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。