[{"id":"840f0737-df1d-47ae-bb0a-359b01fe0608","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5d9cdef-8854-4505-89be-a2bbc3cb4482","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3dc3dd55-35b0-4d23-bf62-47bc3650e4ee","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"80d84fbc-d0f8-4e4a-947f-e3e4de9b49b2","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"9152b7ca-0186-4fe3-a26f-5a05f322db07","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
        
(Showing Draft Content)

树形报表

树形报表是统计报表中常用的一种报表功能和样式,利用树形报表可以实现数据的逐层折叠与展开,方便逐级查看更细粒度指标数据。

之前在矩表的手动制作树形折叠/展开效果章节中,已经为您介绍过如何在矩表中实现折叠展开的效果,这其实就是一种典型的树形结构报表。

接下来本节将基于使用表格组件设计报表组件再为您介绍两种在实际应用中比较常用的树形报表: 固定层级的树形报表固定列的折叠与展开

树形报表-固定层级预览效果.gif

树形报表-固定列折叠展开预览效果2.gif

固定层级的树形报表

表格的固定层级树形结构与矩表中树形结构的实现过程非常类似,也是用上级的文本框来控制下级的分组内容是否显示。

1. 新建报表,添加表格组件,并为其绑定三级分组,如下图所示。

image2020-11-5_11-10-57.png


2. 为明细行绑定对应的明细数据,如下图所示。此时各分组尾,自动添加了汇总。

image2020-11-5_11-11-53.png


3. 您可以先预览一下报表,会发现表格各分组尾的汇总行并不是我们需要的内容,而且会影响数据的展示效果。因此我们将三个分组尾都删除,删除后效果如下图所示。

image2020-11-5_11-12-50.png


4. 添加折叠展开效果。

单击“ 销售大区 ”单元格,然后在属性设置面板中找到文本框名称,并复制待用。

image2020-11-5_11-13-48.png


表格分组窗格中单击分组“ 表格1_销售省份1 ”,然后在属性设置面板中找到显示选项下的切换元素,并将复制的文本框名称粘贴于此。

image2020-11-5_11-37-45.png

同理,将“ 销售省份 ”文本框的名称作为“ 表格1_销售城市1 ”分组的切换元素;“ 销售城市 ”文本框的名称作为明细行的切换元素


5. 此时预览报表,可以看到表格已经具备折叠展开的功能。但折叠展开按钮与实际行为是相反的,因此需要调整一下初始状态。

选中三个分组头单元格,在属性设置面板中,将初始切换状态调整为展开

image2020-11-5_11-46-30.png


6. 调整各分组头位置,使其呈现出树状的视觉结构。

首先选中分组头,单击左对齐按钮,使各分组头均靠左对齐。这样更容易呈现出树状分布。

image2020-11-5_11-48-20.png


适当拉宽表格第一列的宽度,然后选中“ 销售省份 ”单元格,将它的左边留白修改为“ 20pt ”。

image2020-11-5_11-54-1.png


同理,将“ 销售城市 ”单元格的左边留白修改为“ 40pt ”。

image2020-11-5_11-57-6.png


7. 预览报表,即可看到树状折叠结构已经呈现。

image2019-6-3_16-48-34.png

固定列的折叠与展开

列的折叠展开实现方法与行上面的折叠展开类似,也是用一个文本框的名称来控制列的显示与否。

1. 新建表格并绑定数据字段。

image2020-11-5_12-9-21.png


2. 在表头处增加一行,并按照下图所示进行单元格合并和文字输入。

image2020-11-5_12-11-33.png


3. 单击“ 订单详情 ”单元格,复制名称。

image2020-11-5_12-12-7.png


4. 选中表格列,然后将上一步骤中复制的文本框名称粘贴到表格列的切换元素中。同理,将文本框名称同样粘贴到最后两列的切换元素中。

image2020-11-5_12-14-27.png


5. 单击“ 订单详情 ”单元格,然后在属性设置面板中将初始切换状态修改为展开

image2020-11-5_12-21-0.png


6. 预览报表,即可看到最后三列数据可以折叠和展开。

image2019-6-3_17-27-10.png

image2019-6-3_17-26-56.png