JS实现自定义折叠树节点展开层数

朴灿烈づ我的快乐病毒、 2023-06-07 10:52 48阅读 0赞

## 1. 描述 ##

在日常报表制作过程中，组织树形式是非常便捷常用的展示形式。但在使用过程中，因为数据量，以及组织树层级不确定时候。我们希望能够初始化时候根据需求展开一定层级的树节点。

## 2. 思路 ##

通过给组织树的每个层级添加树节点按钮；添加定位符，最后通过JS设置加载结束事件、判断定位符的位置，点击树节点按钮展开层数。

## 3.操作步骤 ##

### 3.1 报表设计 ###

构建一个控件树节点，具体建立方法可参考 [组织树报表示例][Link 1]。

打开模板：%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\Advanced\\GroupReport\\组织树报表.cpt

此处是一个三层的树结构，如下图：

![format_png][]  
给添加了数据列的三个单元格（上图 A1,A2,A3）设置按钮控件，右击这三个单元格，右侧弹出控件设置面板，按钮类型选择树节点按钮，如下图所示：  
![format_png 1][]

### 3.2 设置加载结束事件 ###

点击菜单模板>模板 Web 属性>数据分析设置，添加加载结束事件，如下图所示：

![format_png 2][]

JS 代码如下：

$("#content-container").find("tr").has(".x-treenode-unexpand").each(function(){
    if($(this).children().eq(0).text()==1){ //eq（0）表示最左边的单元格；text（）==1，表示内容为1的单元格
    $(this).find(".x-treenode-unexpand").trigger('click');}})

### 3.3 添加定位符 ###

在需要展开的组织树节点前，增加 一个数字1作为定位符。并设置定位符的父格，随着部门进行扩展。

注：定位符可以任意设置，但需与 JS 中 text()处保持一致。

如图所示：

![format_png 3][]  
最后，将 A 列隐藏即可。

点击保存后，选择数据分析预览。效果为默认模板打开时候，只展开一层树节点。

### 3.4 扩展：展开二层数节点 ###

如果想要展开两级节点，前面步骤均一致，在第二级部门 ID (即 B2 单元格)前面增加定位符即可。

如图所示：在 A2 单元格输入定位符：1；

![222][]

同理设置 A2 单元格左父格为 B2；

![222][222 1]

之后将 A 列隐藏。

点击保存后，选择数据分析预览。效果为默认模板打开时候，展开两层树节点。

## 4 预览效果 ##

只展开第一层树节点，效果如下：

![222][222 2]

展开二级节点，效果如下：

![222][222 3]

注：不支持移动端。

## 5.已完成模板 ##

只展开第一层树节点:

模板效果在线查看请点击 [自定义一层树节点展开][Link 2]。

已完成的模板，可参见%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\Advanced\\GroupReport\\自定义一层树节点展开.cpt。

[点击下载模板][Link 3]

展开第二层树节点

已完成的模板，可参见%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\Advanced\\GroupReport\\自定义二层树节点展开.cpt。

[点击下载模板][Link 4]

[Link 1]: http://help.finereport.com/doc-view-359.html
[format_png]: /images/20230601/d3dbd2b9254946eab27c2cd4099f301a.png
[format_png 1]: /images/20230601/ac349f7cac49428b88a9d3e90eb90471.png
[format_png 2]: /images/20230601/2a803492ec354ff5a55cde221d98bf3e.png
[format_png 3]: /images/20230601/299419fd559f479eb411918ac0b2b12a.png
[222]: /images/20230601/0de7633816d8476b9cbb9e660b807d98.png
[222 1]: /images/20230601/cd5d3d1185d54a50b43b2a8f61e6ab84.png
[222 2]: /images/20230601/4387b83af35f4785be824837fc50e622.png
[222 3]: /images/20230601/f16207ce30884ec3ae7dfb3029adb242.png
[Link 2]: http://www.finereporthelp.com:8889/demo/ReportServer?reportlet=doc/Advanced/GroupReport/microtree.cpt&op=view
[Link 3]: http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/Advanced/GroupReport/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80%E5%B1%82%E6%A0%91%E8%8A%82%E7%82%B9%E5%B1%95%E5%BC%80.cpt
[Link 4]: http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/Advanced/GroupReport/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8C%E5%B1%82%E6%A0%91%E8%8A%82%E7%82%B9%E5%B1%95%E5%BC%80.cpt