jquery ztree 当前父节点下增加子节点问题_点击事件增加子节点

最新推荐文章于 2021-05-23 18:23:40 发布

iteye_4562

最新推荐文章于 2021-05-23 18:23:40 发布

阅读量1.2k

点赞数

分类专栏： jQuery 文章标签： jquery chrome json ViewUI

本文链接：https://blog.csdn.net/iteye_4562/article/details/82545868

版权

jQuery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

[size=medium]一、功能描述：[/size][b][color=darkblue]利用jQuery ztree3.1版本插件做导航树形菜单时，页面打开先加载二级菜单，通过点击事件，异步加载的方式，在添加当前父节点的子节点。[/color][/b]
[size=medium]二、初始步骤：[/size]
1.按照文档要求，导入jquery包，ztree插件包3.1版本；
2.编写相应的jsp页面代码

[size=medium]三、遇到问题：[/size]
1、通过chrome调试的时候，提示：addNodes不是当前jquery对象treeObj的方法。但是在api文档里确实存在这个方法。
2、经过很长时间的摸索，开始把ztree-core.js插件换成高版本的，结果addNodes好用了，但是没有了菜单的图标，而且所有的都是异步加载。

[size=medium]四、解决问题：[/size]

原因：最后在3.2版本更新日志中，发现这么一句话：
[color=red]* 【修改】代码结构，将 addNodes、removeNode、removeChildNodes 方法和 beforeRemove、onRemove 回调转移到 core 内。[/color]
最终领悟，原来3.2版本之前的addNodes。。。等一些方法在ztree.exedit.js中，而且在3.1文档中，方法前也有E字母标识。
[b][color=darkblue]所以只要引入jquery.ztree.exedit-3.1.js 包，即可解决这个问题。[/color][/b]

[size=medium]五、总结[/size]
粗心浪费了好多时间，注意API中的小细节。
这是jqueryztree 各个版本的URL：[url]http://code.google.com/p/jquerytree/downloads/list[/url]，供大家参考。

[size=medium]六、jsp代码，只需要加入jquery.ztree.exedit-3.1.js ，url换了即可。[/size]

%@ 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>