表格容器是专门为表格数据关联服务的,它将以子表方式嵌入到表格面板中。尤为关键的是,同一个表格面板可以关联多个表格容器,而表格容器还可以继续嵌入表格容器。这就意味着,WebBuilderX中的关联表在理论上可以做到无限数量、无限层级的嵌套。
现仍以之前的“容器1”表格为例,简要看看关联表的实现过程:
首先进入该数据表格页面的设计窗口,点击“添加容器”,容器类型选择为“表格容器”。表格容器的标题可写可不写,但如果有2个或以上的表格容器关联,则必须写。如下图:
点击“确定”按钮,就会在当前页面添加一个名为“子表1”的表格容器。
双击该容器重新进入属性设置,选择“表格属性”页签,添加关联表。如下图所示,就会将当前表格容器与父级的“容器1”表格关联起来,它们通过“姓名”建立关联。这里的关联字段是可以多选的,但一定要保证它和匹配字段在数量及类型上完全保持一致。当关联字段为字符型时,还可以勾选是否为模糊匹配方式(默认为精确关联):
该容器创建完成之后,可通过元素操作按钮或右键菜单方式添加子表要显示的字段列:
回头再点击“容器1”,修改“姓名”的列属性配置(把绑定的表格容器指定为“子表1”):
保存之后,重新生成代码,刷新页面,点击“姓名”旁边的三角箭头,子表数据就展示出来了。如果同时勾选了“首行子表自动展开”,则刷新页面时,首行子表无需点击就能自动展开(该配置项对详情页一样有效)。如下图,这是仅关联一个子表的效果,所以这个子表要不要标题都无所谓:
如果再建一个表格容器“子表2”,容器参数为:
这是按性别关联的,所以表格属性里的“关联数据展开设置”为:
请注意,在设置子表2的父级关联表时,有2个选择项:一个是“容器1”,也就是表格面板;另一个是“子表1”。如果将父表指定为“子表1”,那么,这个“子表2”就会嵌套在“子表1”中,而“子表1”又是嵌在表格面板里的,所以对于表格面板来说,“子表2”就是它的孙级关联。为简单起见,这里仍将“子表2”的父级关联表指定为“容器1”。
“子表2”容器创建完毕之后,向里面添加一些字段。如:
回头再到“容器1”中,将姓名列绑定的子表指定为2个:
保存,重新生成代码,刷新页面之后,那么弹出的关联表就有2个:
如果在姓名列的关联数据定义中,勾选“以右侧弹层方式展开”,则关联表会以右侧弹层方式弹出: