JS实现一键展开、折叠所有树节点

在数据分析报表中，通常会有结构树展开的分析报表。在结构树节点较多的时候，逐个进行展开、折叠等操作时，会比较繁琐、费时间、费手劲；此处示例通过点击按钮的方式，使用js实现一键展开、折叠所有的树节点（不限制层数）

1、设置JS事件

在需要事件展开/折叠的单元格/按钮上，添加“超级链接”，分别键入JavaScript事件控制：

展开事件：

// 一般都是匹配到的量几十个几百个，可以正常运行，比如省市区
$('.x-treenode-unexpand').trigger('click');

值得注意的是，如果匹配到的元素太多的话，会比较吃电脑性能，比如几千个（让我遇上了），这时候建议尝试官方文档：

JS实现自定义折叠树节点展开层数- FineReport帮助文档|报表开发|报表使用|学习教程

折叠事件：

$(".x-treenode-expand").attr("class","x-text fr-widget-click x-treenode-unexpand");
$('.fr-widget-click').eq(0).trigger('click');
$(".tntr").css('display','none');

2、效果图

如上，就可以实现分析报表中，通过点击按钮的方式，实现一键展开、折叠所有的树节点

JS实现一键展开、折叠所有树节点相关推荐

antd 表格树如何展开_antd design tree 怎样实现：展开折叠全部树节点
antd 的 Tree 控件没有提供点击展开的功能,只能通过左边的三角形实现展开和收起,没办法只好自己实现这个功能. 截图.gif 如图实现的是类似 Mac 文件目录形式的结构,有箭头代表是个文件夹, ...
el-table表单一键展开折叠，展开部分后一键全部展开或折叠
实现功能: 1.表单一键展开或者一键折叠 2.表单点击展开一部分后,再次点击展开或折叠按钮可以全部展开或全部折叠 3.完整代码在最后 1.建立el-table的树形结构 1.ref="tab ...
MFC树型控件搜索并展开高亮指定树节点
项目需要做一个关于目录树节点的搜索功能先讲一下大概思路,大部分人都会从根节点一步一步地往下展开,不断地迭代搜索,但是这个方法比较麻烦,因为要不断地记录父节点,一层一层往下,有几层就要记录几个父节点. ...
html可折叠的树,JS实现一键展开或收起折叠树/视图树所有节点
2.1 折叠树示例 2.1.1 添加按钮打开%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\复杂折叠树.cpt报表,并添加 2 个按钮 ...
JS实现自定义折叠树节点展开层数
1. 描述在日常报表制作过程中,组织树形式是非常便捷常用的展示形式.但在使用过程中,因为数据量,以及组织树层级不确定时候.我们希望能够初始化时候根据需求展开一定层级的树节点. 2. 思路通过给组织 ...
js 展开折叠动画原理，jquery的toggle切换效果
效果图: 想法: jquery的展开折叠动画效果很好看,想自己实现一个,结果发现仅仅只靠css添加类和动画是不行,最开始的思路是折叠时候设置高度为0,展开时设置高度设置为auto,让他自己撑开,可是t ...
js 控制展开折叠 div html dom
js 控制展开折叠 div html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
flex tree 展开树节点
1展开树节点 public function expandChildrenOf(item:Object, open:Boolean):void 打开或关闭指定项目下的所有树项目.如果设置 dataPr ...
echarts树状图点击展开子节点_CPU眼里的结构设备树节点及属性详解
1 设备树(device tree)简介DTSpec定义一个devicetree的约束来描述硬件设备,boot引导程序将设备树传递给用户程序的内存空间中,并传递给用户相应设备树的指针.设备树为一个树形 ...

JS实现一键展开、折叠所有树节点

JS实现一键展开、折叠所有树节点相关推荐

最新文章

热门文章