学步园

转载请注明出处：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 ]

首先界面加载时设置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();
    };