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

转载请注明出处: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();
    };
时间: 2024-10-08 10:29:03

Jquery树控件ZTree保持单一路径并定时刷的相关文章

Jquery树控件ZTree异步加载

转载请注明出处:jiq?钦's technical Blog 异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 这里面主要设计ztree的setting变量的async属性设置: var setting = { async: { enable: true, url:"InitServiceIpsData.action", autoParam:["id", "name"], dataFilter:

ztree jquery 树 控件

插件地址:http://www.ztree.me 数据:[{"id":1,"pId":-1,"name":"根目录"},{"id":2,"pId":1,"name":"子目录1"}] <ul id="tree" class="ztree" style="padding: 0px 0px;&qu

转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题所以没有动手处理.今天闲来无事琢磨了一下这个需求.我的解决思路如下所示: 1.监听文本框的onkeyup事件:实时传递其值到某个函数: 2.编写某个函数接收文本框的值通过zTree的模糊查找方法getNodesByParamFuzzy(key,value)获得: 3.将匹配到的节点列表结合重新赋值给

自定义的jquery ui树控件

简单的自定义jquery ui树控件,用于机构人员,支持自动加载下级节点数据 jQuery.widget("xway.Tree", { _Node: function(data) { this.id = data.type + "_" +data.id; this.trid = "tr_" + this.id; this.label = data.label; this.parent = null; this.tree = null; this.

转:zTree树控件实战篇:针对多个下拉加载zTree树应该如何做出合理的配置

今天有一个zTree的朋友遇到一个非常棘手的问题,才研究zTree树控件两天就被上头催着看成果,很是苦恼.他面对的问题就是页面内多个地方需要下拉在其文本框下方加载zTree树,由于对zTree下拉加载树的一些关键配置以及原理的不太深入导致问题无从查起.今天就来一起聊聊这样一个下拉加载zTree的问题. 一.几个关键的配置需要注意 1.针对不同的下拉选择需要有自己独立控制zTree显示位置以及隐藏相应标签的方法: 2.需要根据所点击事件定位zTree的显示位置: 3.zTree树选择后需要加以判断

js树形控件—zTree使用总结(转载)

0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 zTree的特点 最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery.ztree.e

共有21款 jQuery 树形控件开源软件,第1页

JQuery Tree 插件 zTree zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree...更多zTree信息 最近更新: [每日一博]Ztree+PHP 无限极节点递归查找节点 发布于 1年前 jQuery的Tree控件 jstree j

我的开源框架之树控件

需求: 1.根据无限级的树形结构的json生成树菜单 2.树样式可以是图标类型和简单类型 3.可以自定义节点的图标 4.支持复选框 5.支持懒加载方式请求数据 6.支持节点点击事件 7.只有右键菜单[未实现] 8.支持拖拽调整节点[未实现] 实现图例 客户代码 1 <body> 2 <div id="Container" style="padding:10px; margin:0 auto;width:800px;height:300px;padding-t

基于MVC+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验. 在很多界面设计上,我们可能都需要引入树列表控件,这个控件可以用zTree来实现,也