集算表（TableSheet）如何通过DataManager设置层级数据

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

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

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

一、HierarchyParent

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

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


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



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



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


其中图片链接为：

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

复制代码

展开分组标记为：

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

复制代码

收起分组标记为：

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

复制代码

结果如下：

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

二、HierarchyLevel

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

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

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


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

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


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



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

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


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

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

1. hierarchy: {
   
2.                 type: 'Custom', // config the custom hierarchy type
   
3.                 column: 'WBSNumber',
   
4.                 parse: function (options) { // parsing the key to the parent key that be similar as the parent hierarchy type
   
5.                     let segments = options.data.WBSNumber.split('.');
   
6.                     return segments.slice(0, segments.length - 1).join('.');
   
7.                 },
   
8.                 unparse: function (options) { // if the key should be updated, unparse the related data to the key
   
9.                     let parentIds, currentIndex = options.index, parentData = options.parentData, parentKey = parentData && parentData.WBSNumber;
   
10.                     if (parentKey) {
    
11.                         let sp = parentKey.split('.');
    
12.                         parentIds = sp;
    
13.                     } else {
    
14.                         parentIds = [];
    
15.                     }
    
16.                     parentIds.push(currentIndex + 1);
    
17.                     return parentIds.join('.');
    
18.                 }
    
19.             },

复制代码