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

时间:2018-05-24 21:00:47

标签: primefaces jsf-2 handsontable primefaces-extensions

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

有没有人知道使用PrimeFaces的这个扩展来合并行和列的方法?

1 个答案:

答案 0 :(得分: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}
      ];  
};