如何使用 pe:sheet 跨越行和列？

Question

我正在尝试创建一个应用程序，用户可以在其中编辑 Excel 单元格内容并希望使用 PrimeFaces Extensions pe:sheet。我可以很容易地在单元格中显示内容，但是我没有找到能够合并单元格的解决方案。

有谁知道使用 PrimeFaces 的这个扩展来合并行和列的方法吗？

Answer 1

我是作者。工作表基于 HandsonTable.js，您可以在此处查看合并的单元格演示：

https://docs.handsontable.com/4.0.0/demo-merged-cells.html

var
  container = document.getElementById('example1'),
  hot;

hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(100, 18),
  colWidths: [47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47],
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  mergeCells: [
    {row: 1, col: 1, rowspan: 3, colspan: 3},
    {row: 3, col: 4, rowspan: 2, colspan: 2},
    {row: 5, col: 6, rowspan: 3, colspan: 3}
  ]
});

在此处查看我们关于使用“extender”或“updateSettings”的示例，以便您可以在加载时为合并的单元格设置 Javascript。

https://www.primefaces.org/showcase-ext/sections/sheet/dynamicColumns.jsf

<pe:sheet id="sheet" 
  value="#{sheetDynamicController.sheetRows}" 
  var="row" height="400" 
  rowKey="#{row.id}" 
  showRowHeaders="true" 
  sortBy="#{row.id}" 
  sortOrder="ascending"  
  width="800"  
  widgetVar="sheetWidget"  
  extender="sheetExtender">

...

<script type="text/javascript">  
function sheetExtender() {  
    this.cfg.mergeCells: [
        {row: 1, col: 1, rowspan: 3, colspan: 3},
        {row: 3, col: 4, rowspan: 2, colspan: 2},
        {row: 5, col: 6, rowspan: 3, colspan: 3}
      ];  
};