历史版本10 :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)在需要展开的组织树节点前,增加 一个数字 1 作为定位符。并设置定位符的父格,随着部门进行扩展。如下图所示:

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

2)隐藏A 列。

3)如果想要展开两级节点,前面步骤均一致,在第二级部门 ID (即 B2 单元格)前面 A2 单元格输入定位符 1。设置 A2 单元格左父格为 B2。如下图所示:

2.5 效果预览

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

222

展开二级节点,效果如下图所示:

222

注:不支持移动端。

3. 模板下载编辑

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

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

点击下载模板:自定义二层树节点展开.cpt     自定义一层树节点展开.cpt