SpreadJS数据绑定合并部分单元格

收藏

本帖最后由 Winny 于 2022-3-8 15:54 编辑

SpreadJS种，借助数据绑定，可以很好的实现模板与数据分离。这样，对于一些个人信息填报，检测报表等场景，可以始终在服务端维持一张空表，用户填写的数据，通过调用sheet.getDataSource().getSource()就可以很方便的获取到。在后续做数据的二次分析时，这就会十分有用。<br>在一些特定的场景中，用户希望最终绑定形成的表类似于分组表，某些部分值相同时，需要自动进行合并，以下表为例： image.png93809203.png

其中红色区域内的东西，就属于需要自动根据内容合并的部分，本文会详细讲解如何使用数据绑定的方式来实现这一需求。
step1: 制作表单；<br>使用在线表格编辑器中，点击数据Tab下的工作表绑定模块，设计模板。
designTemplate.gif859451904.png

右侧的数据源列表，可以选择手动添加，也可以自己构建一个数据源json结构，关于数据源设置有不了解的可以自行在论坛搜索。
Step2: 根据绑定字段，创建源数据。
源数据一般情况，是用户多源整合查询后返回给前端的数据。这里由于只是一个前端的演示demo，直接写了一个变量（data）来代替数据源。

let data = {
date: '2021-09-10',
details:[
{
num: 1,
subject: '路径',
content: '树木',
status: '',
result: '',
charge: '',
participants:''
},{
num: 1,
subject: '路径',
content: '建筑物',
status: '',
result: '',
charge: '',
participants:''
},{
num: 1,
subject: '路径',
content: '其它',
status: '',
result: '',
charge: '',
participants:''
},{
num: 2,
subject: '杆塔拉线',
content: '基础',
status: '',
result: '',
charge: '',
participants:''
},{
num: 2,
subject: '杆塔拉线',
content: '铁塔',
status: '',
result: '',
charge: '',
participants:''
},{
num: 2,
subject: '杆塔拉线',
content: '杆线',
status: '',
result: '',
charge: '',
participants:''
},{
num: 2,
subject: '杆塔拉线',
content: '拉线',
status: '',
result: '',
charge: '',
participants:''
},{
num: 2,
subject: '杆塔拉线',
content: '倾斜',
status: '',
result: '',
charge: '',
participants:''
},{
num: 2,
subject: '杆塔拉线',
content: '其它',
status: '',
result: '',
charge: '',
participants:''
}
]
}

复制代码

Step3: 绑定数据；

let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)
let sheet = spread.getActiveSheet()
sheet.setDataSource(source)

复制代码

Step4：设置区域自动合并。

let table = sheet.tables.findByName('details')
let tableRange = table.dataRange()
let range = new GC.Spread.Sheets.Range(tableRange.row,tableRange.col,tableRange.rowCount,2)
sheet.autoMerge(range,GC.Spread.Sheets.AutoMerge.AutoMergeDirection.rowColumn)

复制代码

用户填写数据后，使用sheet.getDataSource().getSource()来获取填写完成的数据，可以自己尝试一下。

demo地址： https://jscodemine.grapecity.com/share/xoun5sBb9UuOoCLP-urF0g/

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

SpreadJS数据绑定合并部分单元格

0 个回复