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

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

飞书

当数据间存在「多对一」的对象关系,且包含「层级」时,如行政区划、商品品类、文档目录等,展示为树状结构可以非常清晰的表现出数据间的关联关系。飞书低代码平台中,自带树状结构展示能力的组件有:​
​
💡
本文将以「资产管理」应用为例,介绍如何让「数据表格」、「列表详情」以树状层级结构展示数据,同时讲解用「表格容器」展示的局限性。​
​
效果展示​
​
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
​
​
​
​
​
​
​
预约飞书企业效能顾问 深度诊断企业痛点,定制专属 AI 办公方案

字节跳动旗下 AI 工作平台

关联文章推荐

优质内容,精华实践

先进团队,先用飞书

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

字节跳动旗下 AI 工作平台

联系我们立即试用