`
红尘默岩
  • 浏览: 78060 次
  • 性别: Icon_minigender_1
  • 来自: 福建福州
社区版块
存档分类
最新评论

zTree异步加载全部节点

阅读更多

  首先,刚接触zTree时,一直研究异步加载时如何在前段js中配置一个固定的根节点,可是最终失败了,貌似zTree不支持这种做法,这点ext就比较灵活。所以,zTree做异步加载时,第一次在后台接收id的值会为null,此时需要对齐进行手动赋值,当展开根节点,第二次传参到后台时,接收的id就会有值。

 

  言归正传,其实官方已经提供异步加载全部节点的示例(官方示例地址)。但是,官方的例子冗余代码太多,本示例是将官方示例简化后的版本。不足之处望大家指出。

 

 

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/component/ztree/css/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/component/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/component/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/component/ztree/js/jquery.ztree.excheck.js"></script>

 

<div style="border:solid 1px #a7b5bc; float:left; width:100%; height:100%; overflow-y:auto;">
	<ul id="tree" class="ztree"></ul>
</div>

 

<script type="text/javascript">
	//初始化树
	$(function() {
		$zTree = $.fn.zTree.init($("#tree"), $setting);
		
		//延迟展开根节点
		setTimeout(function(){
			var nodes = $zTree.getNodes();
			if(nodes.length >0){
				$zTree.expandNode($zTree.getNodes()[0], true, false, false);
			}
        },1000);
	});
	
	//定义ztree树所需变量
	var $zTree;
	var $zTreeFlag = true;
	var $setting = {
		async : {
			enable : true,
			url : "/baseplatform/auth/selectSysRoleUserTreeByPid.do",
			autoParam : ["id"],
			otherParam: {"srId":'${sysRole.srId}'}
		},
		callback : {
			onAsyncSuccess : onAsyncSuccess
		},
		data : {
			key : {name : "name"},
			simpleData : {enable : true, idKey : "id", pIdKey : "pId", rootPId : -1}
		},
		check: {
			enable: true
		}
	};
	
	//每次加载节点触发的方法
	function onAsyncSuccess(event, treeId, treeNode, msg) {
		//递归展开子节点
		if(treeNode != undefined){
			expandNodes(treeNode.children, "tree");
		}
	}
			
	//递归展开子节点
	function expandNodes(nodes, treeId) {
		if (!nodes) return;
		var zTree = $.fn.zTree.getZTreeObj(treeId);
		for (var i=0, l=nodes.length; i<l; i++) {
			zTree.expandNode(nodes[i], true, false, false);
			if (nodes[i].isParent && nodes[i].zAsync) {
				expandNodes(nodes[i].children, treeId);
			}
		}
	}
</script>

 

如需转载请注明出处。

 

分享到:
评论

相关推荐

    zTree异步加载子节点针对大数据量数列表

    最近项目中有一个比较大型的树节点加载,网上面也看过一些解决方案,感觉都不是很好,也有很多误区,比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行,所以根据不同的请求达到异步加载子节点的需求。

    java实现ztree异步加载

    首先,我们需要理解ZTree异步加载的基本原理。ZTree通过Ajax请求向服务器获取数据,服务器端(这里为Java)处理请求并返回JSON格式的节点数据。ZTree接收到这些数据后动态构建或更新树形结构。这个过程涉及到的主要...

    关于javaWeb(S2SH)中使用zTree异步加载树节点问题

    在上述问题中,开发者遇到了在S2SH项目中使用zTree异步加载树节点的问题。首先,我们需要了解zTree异步加载的基本配置。`settingMan`对象包含了zTree的配置参数: 1. `data.simpleData.enable : true`:开启简单...

    异步&同步加载树节点----zTree(一)

    例如,一个基本的zTree异步加载配置可能如下所示: ```javascript var setting = { async: { enable: true, url: "your/data/api", autoParam: ["id"], otherParam: {"token": "yourToken"}, dataFilter: ...

    ztree异步加载

    "ztree异步加载"正是解决这一问题的一种高效方案。ZTree是一款基于JavaScript的富UI组件,它提供了一种灵活的方式来构建可交互的树形控件。在处理大量数据时,一次性加载所有节点会导致页面响应变慢,用户体验下降,...

    jQuery zTree 异步加载添加子节点重复问题

    在解决jQuery zTree异步加载添加子节点时出现的重复问题之前,我们首先需要理解zTree树插件的基本特性和其工作原理。zTree是一个基于jQuery的树形控件,它支持多功能的树形结构展示,并且可以轻松实现节点的增删改查...

    ztree异步加载demo(有说明文档)

    【标题】"ztree异步加载demo(有说明文档)" 涉及到的知识点主要围绕着ZTree,这是一个非常流行的JavaScript组件,主要用于构建树形结构的界面,尤其适用于网站导航、文件目录管理和组织结构展示等场景。异步加载是...

    jquery ztree 异步加载

    ### jQuery ZTree异步加载详解 #### 一、概述 jQuery ZTree插件是一款功能强大的树形控件,被广泛应用于Web开发中,用于展示层级结构数据。在大数据量的场景下,同步加载所有节点数据可能会导致页面加载缓慢,用户...

    zTree异步加载简单示例VS2008项目完整源码

    这个"zTree异步加载简单示例VS2008项目完整源码"是针对开发人员的一个实用资源,提供了如何在Visual Studio 2008环境下实现zTree异步加载功能的具体代码实例。 异步加载(Async Loading)是zTree的核心特性之一,它...

    zTree异步加载Demo

    【zTree异步加载Demo】是一个基于SpringMVC框架和MySQL数据库实现的示例,它展示了如何使用zTree这一流行的JavaScript树形插件进行异步数据加载。zTree是一款功能强大的jQuery插件,广泛用于构建多级目录结构,如...

    使用ztree异步加载全国地区。

    在你提到的场景中,"使用ztree异步加载全国地区"是一种优化用户体验的有效方法。zTree是一款非常流行的jQuery插件,主要用于实现树形结构的展示和操作,尤其适用于处理大量数据的场合。 首先,我们来详细了解一下...

    ZTree 异步加载 SSH JSON

    以上就是ZTree异步加载SSH JSON的基本实现步骤。在实际应用中,可能还需要考虑权限控制、懒加载、异步加载失败的处理等问题,以满足更复杂的需求。通过这种方式,我们可以构建出高效、动态的树形界面,提升Web应用的...

    ztree异步加载1

    《zTree异步加载详解——打造高效数据交互体验》 在IT行业中,zTree是一款广泛应用于Web开发的JavaScript树插件,它以其轻量级、灵活性和强大的功能深受开发者喜爱。尤其是在处理大量数据的场景下,zTree的异步加载...

    jquery ztree 异步动态加载

    以下是一个简单的ZTree异步加载示例: ```javascript $(function() { var setting = { async: { enable: true, url: "/getNodes", type: "post", autoParam: ["id"], otherParam: {"type": "async"} }, ...

    ZTree学习(二):异步加载树结构 - CSDN博客1

    通常这里会进行一个简单的 AJAX 请求,获取所需数据后,调用 ZTree 的相关方法加载节点。 此外,`setting` 中还有其他配置项,例如 `check`, `view`, `data`, `callback` 等,它们分别用于控制节点的选中样式、双击...

    ztree 异步加载 拖拽 右键菜单 功能

    异步加载是zTree的核心特性之一,它允许在用户滚动或点击节点时按需加载子节点数据,减少了初始页面加载时的数据量,提高了页面响应速度。实现异步加载需要设置`async`参数,例如: ```javascript var setting = { ...

    zTree异步加载展开第一级节点的实现方法

    zTree异步加载展开第一级节点的实现方法 zTree异步加载展开第一级节点的实现方法是指在使用zTree插件时,如何实现异步加载展开第一级节点的功能。实现该功能需要在setting中的callback中添加onAsyncSuccess回调函数...

    ztree+dwr实现的异步加载树形菜单

    4. **异步加载数据**:当用户展开树形菜单的某个节点时,ZTree会自动触发异步请求,调用DWR中的后台方法获取子节点数据。后台处理完毕后,将结果返回给前端。 5. **接收并渲染数据**:前端接收到数据后,ZTree会...

    jquery zTree异步加载简单实例分享

    知识点四:zTree异步加载的关键配置项 1. enable属性:设置为true以启用异步加载功能。 2. url属性:指定服务器端servlet的路径,用于获取异步加载的数据。 3. autoParam属性:自动传递给服务器的参数名称列表,这里...

Global site tag (gtag.js) - Google Analytics