SpreadJS 绑定数据源报错问题

背景：从V13.1.0 版本开始，SpreadJS 增强了表格的功能，以前没有表格内部新增行功能，新增行是在sheet上新增。         V13.1.0之后表格的行可以自增，不需要在sheet 上整行进行插入。在这种模式下，表格下方有合并单元格或其他表格或者sheet行数不够时，表格内新增行时就会报错。如下图所示的情形就是典型的情形之一，表格下方有合并单元格，表格内新增行时会引起，合并单元格被拆分，表单报错。


如图所示，用户在设计器中设计了如下图所示的表单：


在V13.1.0以前的版本，绑定数据源后，是如下图所示的效果，数据源有4条数据，源表单设计了6条数据的位置，绑定数据源后，原本的25,26行被删除，包括table及table 外的表单。

在新版本中，绑定数据源后，效果如下图，table 内的行数减少，并未影响右侧表单其他部分的样式：

为解决这种差异，在绑定数据源之前，可以添加如下的代码，思路是判断sheet中的table 有没有绑定数据源，如果绑定了数据源，就根据数据源的行数提前在sheet上新增或删除行，添加这样的逻辑后可以保持与原来版本的效果一致。

1. 
   
2.         // 升级临时解决方案
   
3.         function beforeSetDataSource(sheet, source) {
   
4.             console.log('source=', source)
   
5.             sheet.suspendPaint();
   
6.             var deleteTables = [];
   
7.             for (let i = 0; i < sheet.tables.all().length; i++) {
   
8.                 var table = sheet.tables.all()[i];
   
9.                 var bindingPath = table.bindingPath();
   
10.                 for (let i in source.xf) {
    
11.                     if (i == bindingPath) {
    
12.                         var length = source.xf[i].length;
    
13.                         var range = table.range()
    
14.                         if (length > range.rowCount) {
    
15.                             var rindex = range.row + range.rowCount - 1;
    
16.                             var rcount = length - range.rowCount + 1;
    
17.                             sheet.addRows(rindex, rcount)
    
18.                             break
    
19.                         }
    
20.                         if (length < range.rowCount) {
    
21. 
    
22.                             var rindex = range.row + range.rowCount - 1;
    
23.                             var rcount = range.rowCount - length - 1;
    
24.                             var deleteIndex = rindex - rcount
    
25.                             sheet.deleteRows(deleteIndex, rcount)
    
26.                             break
    
27.                         }
    
28.                     }
    
29.                 }
    
30.                 // debugger
    
31.             }
    
32.             sheet.resumePaint()
    
33.         }

复制代码

在数据源的行数小于原先设计的行数时，如果想要保持原先的设计，不删除多余的行，实现思路是在绑定数据源前复制一份表单，绑定数据源后，将原先删除的行复制粘贴至绑定数据源后对应的位置，效果如下图所示：

核心代码：

1. //删除后新增原来的行数不改变样式
   
2.    function afterInsertRows(sheet, tables) {
   
3.             // 如果删除了的话，就直接进行instert操作，没有话不执行，放置多种table的情况
   
4.             if (tables.length > 0) {
   
5.                 let sheetCount = sheet.getRowCount(GC.Spread.Sheets.SheetArea.viewport);
   
6.                 console.log('tables', tables)
   
7.                 tables.forEach(({table, deleteIndex, rcount,nsheet}, index) => {
   
8.                     if (index === 0) {
   
9.                         // 保持行高
   
10.                         let actualRowHeight = sheet.getRowHeight(deleteIndex - 1);
    
11.                         sheet.addRows(deleteIndex+1,rcount)
    
12.                         for (let key = 0; key < rcount; key++) {
    
13.                             sheet.setRowHeight(deleteIndex + 1 + key, actualRowHeight);
    
14.                         }
    
15.                         var fromRanges = new GC.Spread.Sheets.Range(deleteIndex+1, 0, rcount, nsheet.getColumnCount());
    
16.                                 var pastedRange = new GC.Spread.Sheets.Range(deleteIndex+1, 0, rcount, sheet.getColumnCount());
    
17.                                 spread.commandManager().execute({
    
18.                                         cmd: "clipboardPaste",
    
19.                                         sheetName: sheet.name(),
    
20.                                         fromSheet: nsheet,
    
21.                                         fromRanges: [fromRanges],
    
22.                                         pastedRanges: [pastedRange],
    
23.                                         isCutting: false,
    
24.                                         clipboardText: "",
    
25.                                         pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.all
    
26.                                 });
    
27.                     }
    
28.                     spread.removeSheet(spread.getSheetIndex(nsheet.name()))
    
29.                 })
    
30.             }
    
31.         }

复制代码

完整示例可查看附件代码。