Skip to content

左树右表以及交互

背景

某项目的用户列表,左边是树状图的组织架构,右边是用户列表,当单击左侧记录就能对右侧用户表数据进行筛选

在参阅此节,需要掌握监听器的使用,和子对象的使用

实现步骤

我们现在可以通过以下方式实现该功能:

  • 打开数据表 用户数据>>基本信息>> 侧边栏

    类型选模块,模块选择组织架构表(需要提前创建好该表,用到了子对象的相关配置,这里就不赘述了)

    企业微信20230912-161145

    这样我们的用户数据表呈现形式如下:

    image-20230912164549332

  • 接下来我们需要点击左侧的组织架构的组织名称,去筛选右边的用户数据,操作如下:

    用户表添加关联记录字段orgRel,选择关联组织架构表

    image-20230915163548647

    用户表字段一览

    image-20230915163715855

    这样用户表数据就能通过orgRel这个字段进行过滤筛选了,

    接着通过表格监听器去获取组织架构表的记录被点击的事件,在监听器事件里面调用自动化去设置右边用户数据表的过滤条件

    创建监听事件操作如下:组织架构表>>表格设置>>事件监听>>创建监听器

    image-20230915164545961

    创建监听器编辑页面里,选择已经写好的自动化程序(设置用户过滤条件)

    image-20230915164651727

    自动化输入参数值翻到最下面可以看到点击的记录:clickRecord

    image-20230915164734172

  • 自动化程序(设置用户过滤条件)详解

    自动化程序如下:

    image-20230915165230443

    打印eventValue(监听器传入的clickRecord),返回JSON 数据如下:

    javascript
    "eventValue":{
      "id":"sdakdhssdf",
       "name":"集团"
    }

    不难看出,表达式${eventValue.id}就是我们的组织ID,

    于是设置过滤器的过滤条件的表达式为${eventValue.id},就可以筛选出关联该组织的用户数据了

    image-20230915165510586

效果

  • 点击左侧的组织架构,右边就能筛选出对应的用户数据

    image-20230915165953828