TableSheet如何通过DataManager设置层级数据

收藏

本帖最后由 Ellia.Duan 于 2024-3-29 17:10 编辑

TableSheet支持层次数据，可以通过数据源模型中的层次选项来配置。

下文重点介绍用UI方式实现在集算表中设置层级数据，关于代码方式可以查看文档，文档中很详细介绍了这部分内容

TableSheets 现在支持源数据中的层级结构数据。这包括四种不同类型的记录数据：

一、HierarchyParent

支持如下图所示的数据结构，包括属性“id”和“parentId”

1、如下图所示，设置数据源，url路径为https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/server/api/Hierarchy_Data
image.png273270873.png

2、接下来设置id为主键，并设置隐藏

image.png912776794.png

3、接下来设置parentId的层级结构类型为”父类型“

image.png474696959.png

4、最后设置在title属性添加分组列信息

image.png258255309.png

其中图片链接为：

https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/task-1.png
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/task-2.png
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/task-3.png

复制代码

展开分组标记为：

https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/increaseIndicator.png

复制代码

收起分组标记为：

https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/decreaseIndicator.png

复制代码

结果如下：

具体过程参考附件中的parent.gif

二、HierarchyLevel

支持如下图所示的数据结构，包括属性“level”指示层级结构级别的属性
image.png685096130.png

1、按照惯例，先设置数据源https://demo.grapecity.com.cn/sp ... ierarchy_Data/level
2、设置level属性的层数数据，如下图所示：
image.png917550353.png

3、设置在title属性添加分组列信息（同上）
结果如下：
image.png631741027.png

具体过程参考附件中的level.gif

三、HierarchyChildren
支持如下图所示的数据结构，包括属性“children”分层子集的属性
image.png997583007.png

1、按照惯例，先设置数据源https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/server/api/Hierarchy_Data/children
2、设置children属性的层数数据，如下图所示：

image.png848212890.png

3、设置在title属性添加分组列信息（同上）
结果如下：
image.png352276305.png

具体过程参考附件中的children.gif

四、HierarchyCustom
如下图所示，可以通过自定义函数解析为层级结构的，包含主键的数据。
image.png839209594.png

需要通过代码配置解析过程，如

hierarchy: {
type: 'Custom', // config the custom hierarchy type
column: 'WBSNumber',
parse: function (options) { // parsing the key to the parent key that be similar as the parent hierarchy type
let segments = options.data.WBSNumber.split('.');
return segments.slice(0, segments.length - 1).join('.');
},
unparse: function (options) { // if the key should be updated, unparse the related data to the key
let parentIds, currentIndex = options.index, parentData = options.parentData, parentKey = parentData && parentData.WBSNumber;
if (parentKey) {
let sp = parentKey.split('.');
parentIds = sp;
} else {
parentIds = [];
}
parentIds.push(currentIndex + 1);
return parentIds.join('.');
}
},

复制代码

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

0 个回复