Skip to content

3.10 左树右表

使用侧边栏功能时,您可以轻松地将两个模块侧边放置,形成了一个左树右表的布局。这个特性让您能够更加方便地浏览和比较数据,左侧的树状结构提供了清晰的导航视图,让您快速定位信息,而右侧的表格则展示了详细的数据内容。
现在我们将以部门和部门成员两个表模块作为案例场景,点击具体的部门会展示具体的部门成员。
实现步骤:
1、首先在设计器创建一个部门表模块和成员表模块
部门表: 部门表 成员表: 成员表 2、在成员表模块的【基本信息】中设置部门表为【侧边栏】 侧边栏 3、在部门表中设置数据记录的点击事件,以此达到用户点击某个部门的时候可以过滤出对应部门的成员。 创建事件事件 在上述我们传入的clickRecord这个参数,是上下文参数中提供的,代表我们单击选中的部门记录。 事件参数上下文参数 这个clickRecord参数的数据结构为:

json
{
    "_rowid": "f4dzzz0a1urdt",
    "updateUser_name": "李四",
    "code": "SZZX00009",
    "createUser_name": "李四",
    "updateUser": "lisi",
    "updateTime": 1703470083824,
    "createTime": 1703470083824,
    "children": "lmh0harqcsqho.cpvyjh5y5ogy2",
    "name": "测试部",
    "updateUser_avatar": "bd7a97b7d7484e2f997b159e06701479.jpg",
    "createUser": "lijian",
    "id": "f4dzzz0a1urdt",
    "createUser_avatar": "bd7a97b7d7484e2f997b159e06701479.jpg",
    "seq": 9
}

4、设置单击事件的自动化程序
我们传入了参数到自动化程序中后,需要在自动化程序中根据我们点击传入的参数设置我们表格视图的过滤条件,这样我们就能根据点击的部门过滤出对应该部门的所有成员。 自动化过滤条件:
过滤

5、发布应用,到应用内查看效果。
未点击左侧部门树过滤前:过滤前点击左侧部门树过滤后:过滤后