一、功能描述：利用jQuery ztree3.1版本插件做导航树形菜单时，页面打开先加载二级菜单，通过点击事件，异步加载的方式，在添加当前父节点的子节点。
二、初始步骤：
1.按照文档要求，导入jquery包，ztree插件包3.1版本；
2.编写相应的jsp页面代码
三、遇到问题：
1、通过chrome调试的时候，提示：addNodes不是当前jquery对象treeObj的方法。但是在api文档里确实存在这个方法。
2、经过很长时间的摸索，开始把ztree-core.js插件换成高版本的，结果addNodes好用了，但是没有了菜单的图标，而且所有的都是异步加载。
四、解决问题：
原因：最后在3.2版本更新日志中，发现这么一句话：
* 【修改】代码结构，将 addNodes、removeNode、removeChildNodes 方法 和 beforeRemove、onRemove 回调 转移到 core 内。
最终领悟，原来3.2版本之前的addNodes。。。等一些方法在ztree.exedit.js中，而且在3.1文档中，方法前也有E字母标识。
所以只要引入jquery.ztree.exedit-3.1.js 包，即可解决这个问题。
五、总结
粗心浪费了好多时间，注意API中的小细节。
这是jqueryztree 各个版本的URL：
http://code.google.com/p/jquerytree/downloads/list，供大家参考。
六、jsp代码，只需要加入jquery.ztree.exedit-3.1.js ，url换了即可。
%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>机构维护</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../zTreeStyle/zTreeStyle.css" type="text/css"/>
<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../jquery.ztree.core-3.1.js"></script>
<script type="text/javascript"
</head>
<body>
<div>
<ul id="orgTree" class="ztree" style="width:230px; overflow:auto;"></ul>
</div>
<script type="text/javascript">
//配置setting
var ztreeObj,
setting = {
async: {
enable: true,//开启异步加载模式
contentType: "application/json", //Ajax 提交参数的数据类型。
type: "post",
dataType: "text",//Ajax 获取的数据类型
"url" : "${pageContext.request.contextPath}/org/makeOrgTree.action",
//自动提交当前节点的id
//假设 异步加载 父节点(node = {id:1, name:"test"}) 的子节点时，将提交参数 id=1
autoParam: ["id"]
},
//Ajax 返回的数据格式中，页面主要参数的设置
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pid",
rootPid: "0"
}
},
//树形图动作
view: {
expandSpeed: "fast", //节点展开的速度
selectedMulti: false //设置是否允许同时选中多个节点。
},
//回调函数的设置
callback: {
onClick: zTreeOnClick //点击事件，当点击节点，做的事情。
}
};
/**
* 初始化树形菜单
*/
$(function(){
ztreeObj = $.fn.zTree.init($("#orgTree"),setting);
});
//点击事件的处理
function zTreeOnClick(event,treeId,treeNode){
pid =treeNode.id;
var data = {"org.id":pid};
$.ajax({
url:"${pageContext.request.contextPath}/org/makeOrgTreeAgain.action",
type: "post",
dataType: "json",
data: data,
cache: false,
success: function(jsonArray){
var treeObj = $.fn.zTree.getZTreeObj("orgTree");
treeObj.addNodes(treeNode,jsonArray);
}
});
}
</body>
</html>
分享到：
相关推荐
本文将深入探讨“jQuery ZTree 根目录只能够添加一级目录，子节点添加新的节点到当前节点下方”这一特定问题，并提供相关的解决方案。 首先，ZTree的核心功能是展示和操作树形数据，它支持多级节点、拖拽排序、异步...
在解决jQuery zTree异步加载添加子节点时出现的重复问题之前，我们首先需要理解zTree树插件的基本特性和其工作原理。zTree是一个基于jQuery的树形控件，它支持多功能的树形结构展示，并且可以轻松实现节点的增删改查...
ZTree的数据结构基于JSON格式，每个节点包含id、name、父节点id等基本信息。通过设置配置项，如`setting.edit`, `setting.data.key`, 可以实现编辑功能的开启和定制。例如，设置`edit.enable = true`开启编辑模式，...
此外，它还支持节点的级联操作，当点击某一节点时，可以自动展开或关闭其子节点，为用户提供直观的浏览体验。 **标签**"JQuery zTree 网页树"明确指出了zTree的核心用途，即在网页上创建动态的树形结构。zTree能够...
* 【修改】初始化时 radioType="all", 父节点未展开 且 子节点有被勾选，点击其他 radio 时，不会取消勾选该子节点的bug * 【修改】多棵树拖拽时，拖拽无效后会导致目标书已选择的节点清空的 bug。 * 【修改】多...
ZTree通过异步加载策略，只在用户展开某个父节点时请求服务器获取该节点的子节点数据，这样可以显著减少网络传输的负担。 **3. 实现异步加载** 在ZTree中，实现异步加载需要配置相应的参数。主要涉及以下几个关键...
- `addNode`: 添加节点，可以添加到指定父节点下。 - `removeNode`: 删除指定节点。 - `updateNode`: 更新节点信息，如名称、图标等。 - `selectNode`: 选中指定节点。 - `expandNode`: 展开或折叠指定节点。 ...
3. 数据模型：zTree通过JSON数据格式来定义节点信息，包括id、name、父节点id、是否展开、是否有子节点等属性。 二、zTree的主要功能 1. 动态加载：支持懒加载，当用户滚动或点击时，只加载可视区域内的节点，提高...
6. **数据结构**：zTree的数据模型是以JSON格式表示的，包含节点ID、父ID、文本、子节点数组等信息。 7. **皮肤自定义**：zTree允许用户自定义皮肤，改变树的外观和感觉。 8. **国际化**：zTree支持多语言，可以通过...
【jQuery插件zTree】是用于构建交互式树形...总的来说，jQuery插件zTree提供了一种高效且灵活的方式来构建和操作树形结构，并且通过自定义函数，我们可以轻松地实现清空选中节点子节点等特定需求，从而提高用户体验。
1. 节点（Node）：zTree中的最小操作单位，每个节点都有自己的ID、父节点ID、文本、图标等属性。 2. 树（Tree）：由多个节点组成，具有层级关系。 3. 数据源（DataSource）：用于构建树的JSON数据，包含节点的所有...
{ name: "父节点1", children: [{ name: "子节点1" }, { name: "子节点2" }] }, { name: "父节点2" } ]; $.fn.zTree.init($("#treeDemo"), setting, zNodes); ``` 3. **数据格式** ZTree的数据源通常是一个...
{ name: "父节点1", children: [{ name: "子节点1-1" }, { name: "子节点1-2" }] }, { name: "父节点2" } ]; ``` - **初始化ZTree**：在jQuery的$(document).ready()函数中，调用zTree的init方法启动ZTree。...
{ name: "父节点1", children: [{ name: "子节点1" }, { name: "子节点2" }] }, { name: "父节点2" } ]; $(document).ready(function () { $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); ``` ...
1. **节点（Node）**: zTree中的最小单位，每个节点包含文本、图标、状态等属性，还可以拥有子节点。 2. **树（Tree）**: 由多个节点构成的层次结构，节点间存在父子关系。 3. **JSON数据格式**: zTree通过JSON数据...
然后，jQuery ZTree的核心JavaScript文件为`jquery.ztree.core.js`，它包含了ZTree的基本功能，如节点操作、事件处理、数据加载等。在HTML文件中，需要这样引入： ```html <script src="jquery.ztree.core.js"> ```...
1. **动态加载**：zTree支持根据需要动态加载子节点，降低了页面初次加载时的数据量，提高了用户体验。 2. **多选功能**：提供单选和多选模式，用户可以通过配置参数选择需要的模式。 3. **拖放操作**：内置拖放...
new Dictionary, object> { { "id", "101" }, { "pId", "1" }, { "name", "子节点1-1" } }, // 更多节点... }; ``` 在ASP.NET中，我们可以将这些数据转换为JSON字符串，并通过AJAX请求返回给前端。例如，使用`...
**jQuery Ztree** 是一个基于 jQuery 的开源插件，专门用于构建交互式的树形菜单。这个插件在 Web 开发中被广泛使用，因为它提供了一种简单、高效的方式来展示层次结构的数据，例如网站导航、组织架构或者文件系统。...
每个`<li>`元素代表树的一个节点，而子节点则嵌套在父节点的`<ul>`内。zTree会自动将这些静态HTML转换为动态的树结构。 3. **数据绑定**：zTree的数据模型是JSON格式，通常包含节点ID、父节点ID、节点文本、图标等...