如何巧妙实现双向过滤填报表
需求背景:
填报表可以实现关联过滤的功能,该功能能方便用户进行选择项的关联筛选。基于此功能用户想完成双向的动态过滤功能,如填报项有角色和员工,它们两者是多对多的关系,一个员工可能有多个角色,一个角色有多个员工。双向过滤需要实现当先选择角色时,用户下拉框过滤出该角色下所有的员工;当先选择员工时,角色下拉框过滤出该员工拥有的所有角色。
实现步骤:
1. 数据集准备:
内建数据集,记录角色和员工的对应关系。数据结果如下:
其中角色”普通员工”为所有员工都有的角色,用户”admin”拥有全部的角色。注意该角色和用户不会在下拉数据集中出现,具体实现见下文。
2. 报表模板设计
B1单元格编辑风格为下拉数据集,具体设置如下图:
从取数表达式可以看出,该下拉数据集中不会出现”普通员工”选项。该单元格的触发关联过滤单元格为D1,也就是D1选择值的变化会触发该单元格按照过滤表达式进行数据过滤。过滤关联表达式为”员工=F1.toString()”,其中F1会记录D1的选择结果,下图为F1单元格的自动计算属性定义,使用表达式D1.toString()==”"?”admin”:${D1}.toString(),在D1未选(为空)的情况下值为admin,如果D1已有选择项则F1值为D1单元格的值。注意员工admin对应的角色为全部角色,从而实现初始时全部角色下拉列表的实现。
同理B1单元格编辑风格为下拉数据集,具体设置如下图:
取数表达式为员工!=”admin”,该下拉数据集中不会出现”admin”选项。该单元格的触发关联过滤单元格为B1,也就是B1选择值的变化会触发该单元格按照过滤表达式进行数据过滤。过滤关联表达式为”角色=E1.toString()”,其中E1会记录B1的选择结果,下图为E1单元格的自动计算属性定义,使用表达式B1.toString()==”"?”普通员工”:${B1}.toString(),在B1未选(为空)的情况下值为普通员工,如果B1已有选择项则E1值为B1单元格的值。注意员工普通员工对应的员工为所有员工,从而实现初始时全部员工下拉列表的实现。
C2和E2单元格用于记录填报值,其结果分别和E1和F1结果对应,用自动计算来实现。其中C2的自动计算表达式为:E1.toString()==”普通员工”?”未选”:E1.toString(),如果E1为”普通员工”,即B1选择为空的情况下,显示为”未选”,否则和E1结果保持一致(E1和B1选择项也保持一致)。
实现效果:
角色下拉框初始效果:
员工下拉框初始效果:
选择角色后的员工下拉框过滤效果:
选择员工后的角色下拉框过滤效果:
小结:
1. 利用单元格填报属性中下拉数据集编辑风格的关联过滤表达式完成单元格间的关联过滤。
2. 因为两个填报单元格互为触发单元格,完成选择后不能再选择单元格上保留选择结果。须利用另外的两个单元格记录填报结果,如果要绑定数据库提交,更新值应取另外的这两个单元格值更新数据库。