SpreadJS结合数据绑定实现自助式报表设计

客户需求： 类简道云报表设计，希望结合SpreadJS设计器数据绑定的功能，在拖动字段的同时，可以同时在目标单元格上添加对应的单元格类型，这样更加方便快捷的实现报表设计。

使用设计器进行数据绑定时，目前并没有对应的监听事件，因此想要实现该需求需要对相关的绑定函数进行重写，重写方法如下：

1. let oldFn = GC.Spread.Sheets.CellRange.prototype.bindingPath;
   
2. GC.Spread.Sheets.CellRange.prototype.bindingPath = function(val){
   
3.     oldFn.apply(this,arguments)
   
4.     if(val){
   
5.         //do soethings
   
6.     }
   
7. }

复制代码

接下来就是需要在//do somethings中编写增加组件的功能了，我在这里编写了一个相对简单的函数，大家可以根据业务逻辑编写函数。

1. function addCellType(val,row,col){
   
2.     switch(val){
   
3.         case 'combox':
   
4.             let combo = new GC.Spread.Sheets.CellTypes.ComboBox()
   
5.             combo.items([
   
6.                 {text: 'Oranges', value: '11k'},
   
7.                 {text: 'Apples',value: '15k'},
   
8.                 {text: 'Grape',value: '100k'}
   
9.              ])
   
10.             combo.editable(true)
    
11.             sheet.setCellType(row,col,combo)
    
12.             break;
    
13.         case 'radio':
    
14.             let radio = new GC.Spread.Sheets.CellTypes.RadioButtonList()
    
15.             radio.items([
    
16.                 {text: 'Oranges',value: '1'},
    
17.                 {text: 'Apple',value: '2'},
    
18.                 {text: 'Grape',value: '3'}
    
19.             ])
    
20.             radio.direction(GC.Spread.Sheets.CellTypes.Direction.vertical)
    
21.             radio.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.left)
    
22.             radio.boxSize(16)
    
23.             sheet.setCellType(row,col,radio)
    
24.             break;
    
25.          default:
    
26.             let checkbox = new GC.Spread.Sheets.CellTypes.CheckBoxList()
    
27.             checkbox.items([
    
28.                {text: "a",value: 1},{text: "b",value: 2},{text: "c",value: 3}
    
29.             ])
    
30.             sheet.setCellType(row,col,checkbox)
    
31.        }
    
32.                         }

复制代码

最后将//do somethings替换为 addCellType函数调用即可，具体调用方式如下：

1. GC.Spread.Sheets.CellRange.prototype.bindingPath = function (val) {
   
2.     oldFn.apply(this, arguments);
   
3.     if (val) {
   
4.         addCellType(val,this.row,this.col)
   
5.     }
   
6.                         }

复制代码

经过上边的操作之后，就可以去设计器验证是否可以正常使用了。验证方法：
step1: 添加数据绑定数据源
设计器中点击数据 -> 模板，添加测试数据字段

step2: 拖动字段至单元格中

可以看到，进行数据绑定的同时，单元格类型也已经设置好了。
但此时有用户会有疑问，那改写之后，数据绑定的功能是否还在呢？我们接着进行测试一下。
step3: 绑定数据

可以看到，绑定数据的功能还是正常可以使用的。可以尝试修改一下单元格的内容，之后获取绑定数据。

观察可知，修改之后的数据还是可以正常获取。

友情提示： 这种方式进行报表设计的弊端也是显而易见的，首先数据绑定的方式，即使拖出多个组件，但这些组件映射的数据绑定字段（key）都是同一个，导致获取结果时，只能取得一个字段。在设计时可以将使用同一个组件的key用类似的key来做定义，这样在case判断时这类key可以走同一个逻辑，例如combox1,combox2,combox3等等类似的key,case中主要包含combox就可以走一个逻辑，从而避免多个组件使用同一key的问题，但是这种方式也有一个好处，就是多个组件之间是联动的，具体实现方式还是需要用户结合自己的应用场景做更加灵活的设计，本文只是一种实现思路。

测试代码见附件index.html

上述的CDN已经老旧，可以参考该CDN：