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

编辑
  • 文档创建者:我从山中来
  • 浏览次数:10153次
  • 编辑次数:8次
  • 最近更新:Kevin-s 于 2019-06-23
  • 1. 描述

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


    2. 思路

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


    3.操作步骤

    3.1 报表设计

    构建一个控件树节点,具体建立方法可参考 组织树报表示例

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

    此处是一个三层的树结构,如下图:


    给添加了数据列的三个单元格(上图 A1,A2,A3)设置按钮控件,右击这三个单元格,右侧弹出控件设置面板,按钮类型选择树节点按钮,如下图所示:


    3.2 设置加载结束事件

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

    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()处保持一致。

    如图所示:


    最后,将 A 列隐藏即可。

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


    3.4 扩展:展开二层数节点

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

    如图所示:在 A2 单元格输入定位符:1;

    222

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

    222

    之后将 A 列隐藏。

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


    4 预览效果

    只展开第一层树节点,效果如下:

    222

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

    222

    注:不支持移动端。


    5.已完成模板

    只展开第一层树节点:

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

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

    点击下载模板

    展开第二层树节点

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

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]