如何用「数据表格」、「列表详情」展示树状层级结构数据|飞书低代码平台

如何用「数据表格」、「列表详情」展示树状层级结构数据|飞书低代码平台

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
当数据间存在「多对一」的对象关系,且包含「层级」时,如行政区划、商品品类、文档目录等,展示为树状结构可以非常清晰的表现出数据间的关联关系。飞书低代码平台中,自带树状结构展示能力的组件有:
💡
本文将以「资产管理」应用为例,介绍如何让「数据表格」、「列表详情」以树状层级结构展示数据,同时讲解用「表格容器」展示的局限性。
效果展示
250px|700px|reset
image.png
功能说明:
  • 品类维护中,「资产品类」以树状层级结构展示,支持增加下级品类且不限层数;
  • 资产明细中,以「资产品类」为导航,展示该品类下的资产详情;
  • 资产明细中,单个资产支持入库记录下钻。
搭建步骤
  1. 创建数据对象
💡
想在页面组件中展示为树状结构,底层的数据对象必须构建起层级关系,我们将在「资产品类」对象中进行这一操作。
  • 资产品类
根据资产分类需求,添加图中所示字段,「资产品类」字段设置为必填,数据对象的显示名称选择「资产品类」
「资产品类」字段是构建起层级关系的关键字段,这一步操作是十分必须的,下文提到的「关联对象」字段将通过关联该字段构建起层级关系。
250px|700px|reset
image.png
💡
想要构建起层级关系,必须添加一个「关联对象」字段,并进行自我关联(如图所示),同时打开「层级结构」开关。
250px|700px|reset
「品类层级」字段用于展示所有上级品类,用公式实现,本文不详述,有需要可参考下图配置。
250px|700px|reset
image.png
  • 资产明细
用于记录单个资产信息,如图所示配置相应字段即可:
250px|700px|reset
  • 资产入库记录
用于存放每次入库的记录,如图所示配置相应字段即可:
250px|700px|reset
  1. 搭建流程
  • 修改资产品类
即新增、编辑、删除资产品类,可直接使用系统默认生成的流程,「填写表单」触发的流程修改内置表单显示字段即可,如图所示:
250px|700px|reset
250px|700px|reset
  • 添加下级品类
此流程中需手动添加一个变量,如图所示「新增变量」
此变量主要用于临时存放新增的下级品类
250px|700px|reset
以「填写表单」的方式触发,表单里配置手动添加的「新增品类」变量中的字段,「上级品类」字段隐藏,并用公式关联页面中传入的上级品类信息
250px|700px|reset
image.png
  • 修改资产明细
即新增、编辑、删除资产明细,可直接使用系统默认生成的流程,「填写表单」触发的流程修改内置表单显示字段即可,如图所示:
250px|700px|reset
250px|700px|reset
  • 资产入库
用于增加资产的库存数量,需要根据「资产明细」中的具体资产来增加库存,用「填写表单」方式触发,并选择「查看或编辑已有记录,同时新增记录」操作,配置如图所示:
250px|700px|reset
内置表单中,显示字段分别选择:
  • 资产明细.资产图片:只读
  • 资产入库记录.资产名称:只读,用「公式」选择触发后的「资产明细」
  • 资产入库记录.入库数量
  • 资产入库记录.入库时间:隐藏,用「公式」选择 Today() 函数
  • 资产入库记录.入库人员:隐藏,用「公式」选择「操作发起人」
250px|700px|reset
image.png
入库记录提交:
250px|700px|reset
image.png
库存数量增加:
250px|700px|reset
image.png
资产明细更新后提交入库:
250px|700px|reset
  1. 配置页面
添加「侧导航」,在「品类维护」导航栏中添加一个「数据表格」,具体配置如下图:
最重要的一点是打开「展示为树状表格」的开关
250px|700px|reset
250px|700px|reset
在「资产明细」中,先加入一个「列表详情」组件,选择「资产品类」对象为菜单栏,并打开「展示为树状列表」开发:
250px|700px|reset
在「列表详情」中,嵌套一个「表格容器」,选择「资产明细」对象,并设置过滤条件,同时打开「行扩展」:
250px|700px|reset
image.png
在扩展行中,再嵌套一个「表格容器」,用于展示入库记录,并设置过滤条件:
💡
嵌套了两层「表格容器」后,内层的表格容器将不再支持行扩展,因此这样的组合方式适用于仅有两个层级的数据下钻。
250px|700px|reset
image.png
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
联系我们立即试用