反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

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

  • 文档创建者:我从山中来
  • 历史版本:13
  • 最近更新:Carly 于 2022-09-06
  • 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

    点击下载模板:

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

    附件列表


    主题: 报表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526