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

收藏

本帖最后由 Winny 于 2021-9-10 14:15 编辑

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

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

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

复制代码

接下来就是需要在//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: 添加数据绑定数据源
设计器中点击数据 -> 模板，添加测试数据字段
image.png946705322.png

step2: 拖动字段至单元格中
image.png718903808.png

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

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

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

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

测试代码见附件index.html

Richard.Huang · Richard.Huang

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

		自动登录	找回密码
密码			立即注册

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

1 个回复

SpreadJS 认证

SpreadJS 高级认证