历史版本11 :JS实现自定义折叠树节点展开层数 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 预期效果

在日常报表制作过程中,组织树形式是非常便捷常用的展示形式。但在使用过程中,当组织树层级不确定时候,希望能在初始化时候根据需求展开一定层级的树节点。如下图所示:

1.2 实现思路

通过给组织树的每个层级添加树节点按钮、添加定位符,最后通过 JS 判断定位符的位置,点击树节点按钮展开层数。

2. 实例编辑

2.1 准备模板

准备一个组织树模板。%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\GroupReport\组织树报表.cpt

具体方法可参考: 组织树报表示例

点击可下载模板:组织树报表.cpt

打开此模板,此处是一个三层的树结构,如下图所示:


2.2 添加按钮

给添加了数据列的三个单元格, A1、A2、A3单元格添加「按钮控件」,按钮类型选择「树节点按钮」。如下图所示:

2.3 添加事件

点击菜单栏「模板>模板 Web 属性>数据分析设置」,选择「为该模板单独设置」,添加一个「加载结束」事件,如下图所示:

JavaScript 代码如下:

$("#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');}})

2.4 添加定位符

1)首先,在参数面板添加一个标签控件,控件值设置为"展开层级";一个下拉框控件,控件名称设置为"level"(控件名称可以随意设置,但要保证添加条件属性时公式中的参数与此控件名称保持一致),数据字典设为自定义,本表三级,最多展开两次,故数据字典如下所示;最后添加查询按钮。

2)在需要展开的组织树节点前,添加条件属性,设置可以随展开层级的改变在A列增加定位符(如本表:展开层级为1或2时,第一级部门ID展开,所以A1条件属性为($level=1 or $level=2_时,A1值为1。展开层级为2时,第二级部门ID展开,所以A2条件属性为 $level=2时,A2值为1。第三级无需展开,不用设置)。

如下图所示:

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

3)设置定位符的父格,随着部门进行扩展。


4)隐藏A 列。



2.5 效果预览

保存模板,点击「数据分析」,只展开第一层树节点,展开层级选择1,效果如下图所示:

展开二级节点,展开层级选择2,效果如下图所示:

注:不支持移动端。

3. 模板下载编辑

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

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\GroupReport\自定义二层树节点展开.cpt

点击下载模板:

自定义二层树节点展开.cpt