自定义绑定单元格类型

问题：如何数据绑定时实现自定义单元格类型

背景

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

实现方式

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

let oldFn = GC.Spread.Sheets.CellRange.prototype.bindingPath;
GC.Spread.Sheets.CellRange.prototype.bindingPath = function(val){
    oldFn.apply(this,arguments)
    if(val){
        //do something
    }
}

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

function addCellType(val,row,col){
    switch(val){
        case 'combox':
            let combo = new GC.Spread.Sheets.CellTypes.ComboBox()
            combo.items([
                {text: 'Oranges', value: '11k'},
                {text: 'Apples',value: '15k'},
                {text: 'Grape',value: '100k'}
             ])
            combo.editable(true)
            sheet.setCellType(row,col,combo)
            break;
        case 'radio':
            let radio = new GC.Spread.Sheets.CellTypes.RadioButtonList()
            radio.items([
                {text: 'Oranges',value: '1'},
                {text: 'Apple',value: '2'},
                {text: 'Grape',value: '3'}
            ])
            radio.direction(GC.Spread.Sheets.CellTypes.Direction.vertical)
            radio.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.left)
            radio.boxSize(16)
            sheet.setCellType(row,col,radio)
            break;
         default:
            let checkbox = new GC.Spread.Sheets.CellTypes.CheckBoxList()
            checkbox.items([
               {text: "a",value: 1},{text: "b",value: 2},{text: "c",value: 3}
            ])
            sheet.setCellType(row,col,checkbox)
       }
}

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

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

经过上边的操作之后，就可以去设计器验证是否可以正常使用了。验证方法：

Step1: 添加数据绑定数据源

设计器中点击数据 -> 工作表绑定，添加测试数据字段

Step2: 拖动字段至单元格中

可以看到，进行数据绑定的同时，单元格类型也已经设置好了。

但此时有用户会有疑问，那改写之后，数据绑定的功能是否还在呢？我们接着进行测试一下。

Step3: 绑定数据

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

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

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

详细代码请查看附件Demo：

自定义绑定字段类型.rar

作者: GrapeCity China | 审核：AlexZ | 更新时间：2023.09.24