【ARJS】教你在表格中如何设计树形报表
1. 内容概述树形报表是统计报表中常用的一种报表功能和样式，利用树形报表可以实现数据的逐层折叠与展开，方便逐级查看更细粒度指标数据。本文为您介绍两种在实际应用中比较常用的树形报表：固定层级的树形报表和固定列的折叠与展开。https://help.grapecity.com.cn/download/attachments/57497559/%E6%A0%91%E5%BD%A2%E6%8A%A5%E8%A1%A8-%E5%9B%BA%E5%AE%9A%E5%B1%82%E7%BA%A7%E9%A2%84%E8%A7%88%E6%95%88%E6%9E%9C.gif?version=1&modificationDate=1614138543000&api=v2https://help.grapecity.com.cn/download/attachments/57497559/%E6%A0%91%E5%BD%A2%E6%8A%A5%E8%A1%A8-%E5%9B%BA%E5%AE%9A%E5%88%97%E6%8A%98%E5%8F%A0%E5%B1%95%E5%BC%80%E9%A2%84%E8%A7%88%E6%95%88%E6%9E%9C2.gif?version=1&modificationDate=1614138544000&api=v2
2. 固定层级的树形报表
表格的固定层级树形结构与矩表中树形结构的实现过程非常类似，也是用上级的文本框来控制下级的分组内容是否显示。(1)新建报表，添加表格组件，并为其绑定三级分组，如下图所示。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_11-10-57.png?version=1&modificationDate=1614138543000&api=v2
(2)为明细行绑定对应的明细数据，如下图所示。此时各分组尾，自动添加了汇总。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_11-11-53.png?version=1&modificationDate=1614138543000&api=v2
(3)您可以先预览一下报表，会发现表格各分组尾的汇总行并不是我们需要的内容，而且会影响数据的展示效果。因此我们将三个分组尾都删除，删除后效果如下图所示。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_11-12-50.png?version=1&modificationDate=1614138543000&api=v2
(4)添加折叠展开效果。单击“销售大区”单元格，然后在属性设置面板中找到文本框名称，并复制待用。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_11-13-48.png?version=1&modificationDate=1614138543000&api=v2
在“表格分组”窗格中单击分组“表格1_销售省份1”，然后在属性设置面板中找到“显示选项”下的“切换元素”，并将复制的文本框名称粘贴于此。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_11-37-45.png?version=1&modificationDate=1614138543000&api=v2
同理，将“销售省份”文本框的名称作为“表格1_销售城市1”分组的“切换元素”；“销售城市”文本框的名称作为明细行的“切换元素”。
(5)此时预览报表，可以看到表格已经具备折叠展开的功能。但折叠展开按钮与实际行为是相反的，因此需要调整一下初始状态。选中三个分组头单元格，在属性设置面板中，将“初始切换状态”调整为“展开”。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_11-46-30.png?version=1&modificationDate=1614138543000&api=v2
(6)调整各分组头位置，使其呈现出树状的视觉结构。首先选中分组头，单击左对齐按钮，使各分组头均靠左对齐。这样更容易呈现出树状分布。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_11-48-20.png?version=1&modificationDate=1614138543000&api=v2
适当拉宽表格第一列的宽度，然后选中“销售省份”单元格，将它的左边留白修改为“20pt”。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_11-54-1.png?version=1&modificationDate=1614138543000&api=v2
同理，将“销售城市”单元格的左边留白修改为“40pt”。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_11-57-6.png?version=1&modificationDate=1614138543000&api=v2
(7)预览报表，即可看到树状折叠结构已经呈现。https://help.grapecity.com.cn/download/attachments/57497559/image2019-6-3_16-48-34.png?version=1&modificationDate=1614138543000&api=v2https://help.grapecity.com.cn/download/thumbnails/57497559/%E7%BB%93%E6%9D%9F.png?version=1&modificationDate=1614138543000&api=v2
3. 固定列的折叠与展开
列的折叠展开实现方法与行上面的折叠展开类似，也是用一个文本框的名称来控制列的显示与否。(1)新建表格并绑定数据字段。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_12-9-21.png?version=1&modificationDate=1614138543000&api=v2
(2)在表头处增加一行，并按照下图所示进行单元格合并和文字输入。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_12-11-33.png?version=1&modificationDate=1614138543000&api=v2
(3)单击“订单详情”单元格，复制名称。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_12-12-7.png?version=1&modificationDate=1614138543000&api=v2
(4)选中表格列，然后将上一步骤中复制的文本框名称粘贴到表格列的“切换元素”中。同理，将文本框名称同样粘贴到最后两列的“切换元素”中。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_12-14-27.png?version=1&modificationDate=1614138543000&api=v2
(5)单击“订单详情”单元格，然后在属性设置面板中将“初始切换状态”修改为“展开”。https://help.grapecity.com.cn/download/attachments/57497559/image2020-11-5_12-21-0.png?version=1&modificationDate=1614138543000&api=v2
(6)预览报表，即可看到最后三列数据可以折叠和展开。https://help.grapecity.com.cn/download/attachments/57497559/image2019-6-3_17-27-10.png?version=1&modificationDate=1614138543000&api=v2https://help.grapecity.com.cn/download/attachments/57497559/image2019-6-3_17-26-56.png?version=1&modificationDate=1614138543000&api=v2
:hjyzw: 树形折叠的那个+，-号样式在哪里设置啊，我这边只有一个+，很难看 幸运的每一天 发表于 2021-9-29 10:06
树形折叠的那个+，-号样式在哪里设置啊，我这边只有一个+，很难看
这个是我们另一款产品Wyn种报表模块的截图，样式可能不一致，但是功能是一致的，这里主要展示如何做这个功能。 按照设计思路，固定层级的树形报表的功能做出来了，但是在点击“折叠”或者“展开”的时候，页面会自动刷新一次并折叠或者展开，没有像第一张图那样直接折叠或者展示，版本: 4.3.16，麻烦版主了 wbzhou 发表于 2022-2-10 15:17
按照设计思路，固定层级的树形报表的功能做出来了，但是在点击“折叠”或者“展开”的时候，页面会自动刷新 ...
您好，arjs的最新版本是2.2，您说的4.3.16的版本是那个产品的？我用2.2帮您做了一个demo，您下载查看一下，如果还有新的问题，欢迎您到对应产品的求助中心板块直接发帖，我们帮您解决。 Bella.Yuan 发表于 2022-2-10 15:35
您好，arjs的最新版本是2.2，您说的4.3.16的版本是那个产品的？我用2.2帮您做了一个demo，您下载查看一下 ...
是WEB报表设计器 4.3.16的版本 您好，目前arjs的最新版本是2.2。有问题欢迎您开新帖，帮您解决。
页:
[1]