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

Question

我正在尝试创建一个用户可以在其中编辑 excel 单元格内容的应用程序，并希望使用 PrimeFaces 扩展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}
]
});

请参阅此处有关使用"扩展器"或"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}
];  
};