Appearance
左树右表以及交互
背景
某项目的用户列表,左边是树状图的组织架构,右边是用户列表,当单击左侧记录就能对右侧用户表数据进行筛选
实现步骤
我们现在可以通过以下方式实现该功能:
打开数据表 用户数据>>基本信息>> 侧边栏
类型选模块,模块选择组织架构表(需要提前创建好该表,用到了子对象的相关配置,这里就不赘述了)
这样我们的用户数据表呈现形式如下:
接下来我们需要点击左侧的组织架构的组织名称,去筛选右边的用户数据,操作如下:
用户表添加关联记录字段orgRel,选择关联组织架构表
用户表字段一览
这样用户表数据就能通过orgRel这个字段进行过滤筛选了,
接着通过表格监听器去获取组织架构表的记录被点击的事件,在监听器事件里面调用自动化去设置右边用户数据表的过滤条件
创建监听事件操作如下:组织架构表>>表格设置>>事件监听>>创建监听器
创建监听器编辑页面里,选择已经写好的自动化程序(设置用户过滤条件)
自动化输入参数值翻到最下面可以看到点击的记录:clickRecord
自动化程序(设置用户过滤条件)详解
自动化程序如下:
打印eventValue(监听器传入的clickRecord),返回JSON 数据如下:
javascript"eventValue":{ "id":"sdakdhssdf", "name":"集团" }
不难看出,表达式${eventValue.id}就是我们的组织ID,
于是设置过滤器的过滤条件的表达式为${eventValue.id},就可以筛选出关联该组织的用户数据了
效果
点击左侧的组织架构,右边就能筛选出对应的用户数据