Jquery树控件ZTree保持单一路径并定时刷

最新推荐文章于 2021-01-13 10:43:03 发布

原创最新推荐文章于 2021-01-13 10:43:03 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

WEB Develop 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个需求，即在Jquery ZTree树控件中保持单一展开路径，仅显示一个服务的IP地址，并实现定时刷新该服务的IP列表。通过设置全局变量记录最近展开的节点，在beforeExpand回调函数中收缩之前展开的节点，同时利用reAsyncChildNodes函数进行定时刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载请注明出处：jiq•钦's technical Blog

一、需求

我有一个显示所有可用服务的树，单击服务名称就可以展开节点，显示所有对应的IP地址。

我需要同时只能显示一个服务的IP地址列表，因为不想同时刷多个服务信息，所以需要保持单一展开路径。

此外当管理员在这个界面停留时，为了能够监控当前展开服务的地址变化，需要能够定时刷这个服务的IP地址列表。

备注：对于异步加载Ztree节点，可以参考这篇文章。

二、解决方案

保持单一展开路径很简单，声明一个全局变量记录最近一次展开的节点，然后实现ZTree的beforeExpand回调函数：

var lastExpandNode = null;
    
    //保持单一展开路径
    function zTreeBeforeExpand(treeId, treeNode) {
    	var zTree = $.fn.zTree.getZTreeObj("tree");
    	if(lastExpandNode != null)
    		zTree.expandNode(lastExpandNode, false);
    	lastExpandNode = treeNode;
	    return true;
	};
    
    //ztree设置 
    var setting = {        
        callback: {
        	beforeExpand: zTreeBeforeExpand
        }
    };

beforeExpand函数中收缩上一次展开的ztree节点，然后更新最后一次展开的节点即可。

对于定时强制刷新当前展开的服务的IP地址列表，利用ztree的reAsyncChildNodes函数实现：

reAsyncChildNodes

概述[ 依赖 jquery.ztree.core 核心 js ]

强行异步加载父节点的子节点。[setting.async.enable = true 时有效]

已经加载过的父节点可反复使用此方法重新加载。

请通过 zTree 对象执行此方法。

首先界面加载时设置Jquery异步定时刷新：

//页面加载时初始化配置树
    $(document).ready(function(){
    	$.ajax({
            type: "POST",
            url: "InitServiceData.action",
            data: "",
            dataType: "json",
            success: function(data) {
            	var zNodes = eval("("+data+")");
            	zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
            },
            error: function() {
            	alert("读取服务提供者列表出错!");
            }
        });
    	
    	setInterval("periodlyFunc()", 5000);
    });

在定时刷新函数中强行异步加载最后一次展开的节点即可：

//刷新当前展开节点的子节点 
    function RefreshZTree()
    {
    	if(lastExpandNode != null)
    	{
    		var zTree = $.fn.zTree.getZTreeObj("tree");
    		zTree.reAsyncChildNodes(lastExpandNode, "refresh");
    	}
    };
    
    //jquery定时刷新函数 
    function periodlyFunc()
    {
    	RefreshZTree();
    };