JS实现加载后自动展开所有树节点按钮

在分析报表中，树节点按钮的应用有利于让用户了解数据的架构和关系；而在实际的应用场景中，树节点按钮是不自动展开层级的，而有的用户是需要默认展开一层树节点按钮，或默认展开所有树节点按钮，或通过按钮方式，展开和折叠所有树节点按钮，这时候需要设置加载结束时间，完成树节点按钮的展开。

1、报表设计

具有树节点按钮的分析报表设计如下：

2、JavaScript事件编辑（根据需要选择JavaScript事件）：

（一）在分析报表中，添加加载结束事件（默认展开至第二层），代码如下：

//默认展开至第二层

$('.x-treenode-unexpand').eq(0).trigger('click');

（二）在分析报表中，添加加载结束事件（默认展开全部层），代码如下：

//默认全部展开

$('.x-treenode-unexpand').trigger('click');

3、按钮实现全部展开或折叠

在单元格上，添加“超级链接”，分别键入JavaScript事件控制：

展开事件：

$('.x-treenode-unexpand').trigger('click');

折叠事件：

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

4、效果图

如上，就可以实现分析报表中，树节点按钮的默认全部展开，或通过点击按钮，实现全部展开和全部折叠。

 

附：博主根据用户需要，还需要额外设置点击后实现行背景的需求；

此处附上在树节点中，冻结行列后，点击行改变行背景色的JavaScript时间：

在加载结束事件中，加入JavaScript代码：

//点击时，改变当前行的背景颜色
$('.tar').click(function(e){
    $('.tar').css({"background":"#F5F5F5"});
    if($(e.target).hasClass('tar')||$(e.target).parent('td').hasClass('tar')){
        $('.selecttr').css({"background":"#F5F5F5"});
        $('.selecttr').removeClass('selecttr');
         var lefttr=$(e.target).closest('tr').attr("id");
        $(e.target).closest('.frozen-table').find("#"+lefttr).find('.tar').addClass('selecttr').css({"background":"#E0E9F2"});
        $(e.target).closest('tr').find('td').addClass('selecttr').css({"background":"#E0E9F2"});
        }
})