JS实现折叠树/视图树所有节点一键全部展开或收起

编辑
文档创建者:yi丶搁浅 (55647 )     浏览次数:684次     编辑次数:7次     最近更新:ukae 于 2018-08-10     

目录:

1.需求描述编辑

我们制作的复杂折叠树或视图树报表,在以数据分析模式预览时,需要点击父节点,才会展开下一层子节点,当层数比较多的时候,操作比较麻烦。

如果用户想实现一键全部展开或收起,如何实现呢?

如图一(折叠树):

222

如图二(视图树):

222

2.实现思路编辑

可以添加2个按钮,再通过给按钮添加点击事件来实现对应的功能。


3.示例一编辑

3.1 准备示例

打开 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\复杂折叠树.cpt 报表,并添加2个按钮。

如图:

222
3.2 设置点击事件
分别给“展开”、“收起”按钮添加点击事件,
A、展开JS:
222
//展开的最大节点级值 var t = 3; for(var m = 1; m <= t; m++) { //循环执行“+”号展开 $('.x-treenode-unexpand').trigger('click'); } for(var n = 1; n <= 2; n++) { //执行点击2次(下标从0开始)第1个样式为“fr-widget-click”的元素,定位光标 $('.fr-widget-click').eq(0).trigger('click'); }
B、收起JS:
222
var t = 3; for(var m = 1; m <= t; m++) { //循环执行“-”号收起 $('.x-treenode-expand').trigger('click'); } for(var n = 1; n<= 2; n++){ //执行点击2次(下标从0开始)第1个样式为“fr-widget-click”的元素,定位光标 $('.fr-widget-click').eq(0).trigger('click'); }

保存设置,以“数据分析”预览。

4.示例二编辑

4.1准备示例

打开 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\widgetReport\singletree.cpt 报表。将参数区地区控件视图树放置到A1单元格,并在参数区添加2个按钮(收起、展开),删掉原【查询】按钮,并设置不勾选【点击查询前不显示报表内容】。

如图:
222

4.2 设置点击事件
分别给“展开”、“收起”按钮添加点击事件,
A、展开JS:
222
//展开的最大节点级值 var t = 2; for(var m = 1; m <= t; m++) { //循环执行“+”号展开 $('.fr-tree-elbow-plus').trigger('click'); } $('.fr-tree-elbow-end-plus').trigger('click');
B、收起JS:
222
//展开的最大节点级值 var t = 2; for(var m = 1; m <= t; m++) { //循环执行“+”号展开 $('.fr-tree-elbow-minus').trigger('click'); } $('.fr-tree-elbow-end-minus').trigger('click');
保存设置,以【数据分析】或【填报预览】。

附件列表


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

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

此页面有帮助吗? [ 去社区提问 ]