# 一、简介:

# 使用场景

在项目管理场景下,管理者可以通过【树状列表】汇总项目的数据,一目了然地获取到各个项目的进度状态、负责人、计划周期等项目概要信息。

同时树状列表还能清晰地展示各个项目之前的层级结构;如果子项目的进度变更,其所属项目(父级)的信息也会随之改变,使有关人员更加清晰边界地把控项目的健康状况。

# 显示效果

image.png

# 功能说明

1.标准版不支持配置该组件。

2.树状列表中数据的层级结构存在限制,最多为10层([1],[1.1],[1.1.1],[1.1.1.1]......以此类推到第10层)

3.文中【树状列表】特指PC端页面组件。系统内与【树状】有关的功能较多,各功能的说明可前往文末查看。

# 二、树状数据集

在创建树状列表页面前,需要首先创建与之对应的表单,并在表单属性中开启**【树状数据集】**配置项,配置入口如下:

image.png

在【树状数据集】中完成对应字段的配置:

image.png

其中具体的字段说明如下:

# 1.标题字段

字段说明:

用于展示各项数据的名称,如下方所示的【树状列表】,任务名称即为数据的【标题字段】

注:仅单行文本支持被配置为标题字段

image.png

# 2.开始/结束时间字段

字段说明:

用于展示各项数据的开启/结束时间,如果子级数据的开启/结束时间变更,会相对应地改变父级数据的开启/结束时间字段。

注:该字段非必填,但如果已经配置了开始时间,则结束时间也必须填写。

可用字段类型:日期,日期时间

时间变动.gif

# 3.归属字段

字段说明:

用于存储数据的归属信息,例如下图中的父级数据【2023总工程进度】的归属字段【总工程名称】配置了【2023年项目】,则其下方所有的子级数据(工程1,工程2,工程3,工程2.1,工程2.2)的归属字段都会同步为【2023年项目】。

同时子级数据的归属字段无法直接修改,仅父级数据的归属字段支持编辑修改,并且修改后其所有的子级数据都会同步变动。

注:该字段非必填,可用字段类型:单行文本,单项选择,外键关联

image.png

# 4.统计字段

字段说明:

用于自动统计树状列表中数据(进度,成本,工时.....),可被统计的字段类型为数字字段日期字段。下图是一个统计项目进度的例子:

image.png

其中2022年项目成本=(项目a进度+项目b进度+项目c进度+项目d进度)/4=87.5% (注意,是否保留小数位取决于数字字段的效验类型是否配置为小数)

# 加权平均

统计总共有5种统计方式 :即最大/最小值,平均,求和,加权平均

其中【加权平均】统计方式比较特殊,其使用场景如下:

当某个子项目优先级很高,项目负责人往往希望该子项目的进度对总项目进度的影响比其他优先级低的项目要大

此时就能用到【加权平均】的统计方式,通过【权重字段】来影响各项数据对统计数据的影响比例。

如下图所示,总工程的进度=(工程3进度实际权重+工程2进度实际权重+工程1进度*实际权重)/(总权重)=(10%*10+100%*5+75%*1)/16=42.1%

image.png

由此可以总结出【加权平均】的计算公式: 父级任务的加权平均值= ( x1 * f1 + x2 * f2 + ... + xn * fn ) / ( f总 )
其中x代表需要统计的数字字段 (取该子层级的所有任务数据),f代表权重(子级数据的权重值与总权重值的比值)

# 【加权平均】详细的配置方法:

(1)先选择表单中的【权重字段】(数字字段),配置汇总方式为求和,算出总权重值。

(2)再选择表单中的实际需要进行加权平均的字段,例如下图中的【进度】,配置汇总方式为【加权平均】。

(3)最后再关联表单中的【权重字段】,即第一步配置的数字字段。

image.png

# 三、页面配置

# 1.添加【树状列表】

1.在【页面管理】中添加基础页面

image.png

2.选择树状列表

image.png

3.绑定配置好【树状数据集】的表单

注:树状列表的【绑定表单】只会显示开启了树状数据集的表单。

image.png

# 2.属性设置

image.png

# 2.1基础属性

绑定表单、列表名称、列表字段、数据过滤,列表编辑功能点与其他组件一致。

# 2.2表格设置

列宽设置,支持复选,查询条件样式功能点与其他组件一致。

# 支持列表拖拽

配置入口:

image.png

开启该配置项后,用户可以在页面中直接拖动树状列表内的数据,便捷改变数据的层级结构。

树状拖动.gif

例如,将2023总工程内的工程1拖动至2022总工程内:

image.png

拖动后,数据的有关字段会随之变动,例如工程1的所属字段从2023工程变更为2022工程,2022工程(父级数据)的进度从100%变为95%

image.png

image.png

# 四、按钮配置

# 1.顶部按钮

顶部默认存在添加按钮,可配置包含添加,导入,导出,打印,一键修改值,自定义开发,发起流程在内的7个按钮。

注:树状列表不支持多选数据后一次性删除,因此删除按钮仅支持在行内按钮中配置

image.png

# 1.1导入/导出

树状列表的导入大致流程与列表的导入是相同的,即:

  1. 管理员配置【导入】按钮
  2. 用户在用户端点击【导入】按钮,选择导入方式
  3. 下载导入模版文件到本地
  4. 在本地的导入模版文件中根据指引填充需要导入的数据
  5. 在打印中选中已经编辑好的本地打印模版,点击导入
  6. 如果有报错,再下载包含错误信息的文件到本地,修改后再按上述流程导入即可

不过树状列表的导入存在一些特殊的地方,以下是2个需要额外注意的点:

# 1.1.1 序号字段:

导入/导出场景下,系统需要通过序号字段以区分数据之间的层级结构。

例如这里的父级数据(2023总工程进度)序号为1,其下的子数据(工程1,工程2)序号分别为1.1和1.2。

注:在导入时,序号字段必填。

image.png

# 1.1.2 导入方式:

导入有2种类型的导入方式

image.png

①仅新增数据

仅新增数据的情况下,必须从父级开始添加数据。(即从1/2/3/4开始添加,不可直接从1-1添加)若序号与当前表单已有序号重复,系统将重新计算序号值,由此新增数据。

例如当前表中已经存在【1】,【1.1】,【1.2】的数据:

image.png

在导入模版文件中将导入数据的序号填充为【1】,【1.1】,【1.2】,与当前表单已有序号重复 注:导入文件中序号只能从1开始按顺序向下排布(即从1开始添加,不可以直接从2之后添加)

image.png

导入后导入文件中的数据会按序号的层级结构和顺序插入当前表单数据之前,系统也会重新计算数据值。 以上方导入文件为例,就是将原来表单中的数据序号为【1】,【1.1】,【1.2】的数据修改为【2】,【2.,1】,【2.2】,为导入的数据“让道”。

image.png

②仅更新数据

如需通过导入更新数据,需要先将列表数据导出(含树形序号),基于导出的文件修改完成后再导入。

# 2.行内按钮

顶部默认存在编辑和详情按钮,可配置包含编辑,详情,删除,打印,一键修改值,自定义开发,发起流程,添加子级数据,添加同级数据在内的9个按钮。

image.png

# 2.1 添加子级数据/添加同级数据

# 添加同级数据:

用于创建同层级数据,表单数据提交后新增的数据会与当前数据位于同个层级。

添加同级数据.gif

# 添加子级数据:

用于创建子级数据,表单数据提交后的数据会直接归为当前数据的子级数据。

添加子级数据.gif

# 组件交互方式:

image.png

①打开侧滑面板:

点击按钮后从右侧弹出表单提交抽屉,和列表的【打开侧滑面板】交互是一致的。

②行内操作:

点击后在列表中新增一空行,用户可以直接在行内提交数据,但仅能填写表单树状数据集绑定的标题字段开启/结束时间字段,如下图所示:

添加子级数据.gif

因此选用这种交互方式会存在以下问题:

  1. 新增时,涉及这3个字段的联动配置将失效 (如公式计算、关联可选项、数据联动等);
  2. 填写时,这3个字段的可用条件不再生效,有编辑权限即可填写;
  3. 填写时,按钮中配置的页面操作除【提交】外,其他按钮不会显示;且仅提交按钮配置的触发事件与脚本会生效;

# 四、各类与“树状”有关功能的说明:

# 1.PC端列表的【树状菜单】配置项:

根据表单字段将列表中的数据做简单的分类,用户可以通过【树状菜单】快捷筛选列表数据。

例如在下图的建工场景中,列表中的数据非常多,不便于用户直接查看/操作数据。

如果用户想将【G1#栋】内的所有数据都执行【任务停止】按钮,就可以通过树状菜单快速筛选出数据,再点击全选数据即可。

image.png

# 2.PC端页面-【树状列表】:

以表单【树状数据集】配置的逻辑展示表单数据,用户能直接从【树状列表】中看到表单数据之间的层级结构。

同时子级与父级的数据之间还会互相影响,便于用户直接获取到各项数据的统计信息。例如:如果子级的统计字段值变动了,父级的统计字段值也会跟着变更。

image.png

# 3.表单-关联组件的【树形表单】:

在表单中以关联组件的形式展示pc端树状列表的内容。

点击链接查看相关内容:表单组件-【树形表单】 (opens new window)

image.png

# 4.移动端页面-【树状列表】:

以【主从表】的逻辑展示表单数据,用户可以直接在页面中看到当前表单的关联子表信息。同时支持用户快捷地对子表内容进行编辑/删除等操作。

PC端【树状列表】和移动端【树状列表】在数据的结构上存在很大不同:

PC端【树状列表】的父级子级数据都在同一个表单中,通过【序号字段】确定数据的层级结构,而移动端【树状列表】则是通过表单里的【子表单】组件来展示子级数据。

点击链接查看更多相关内容:移动端【树状列表】 (opens new window)

image.png

1 / 0