分類  >  Web前端 >

jquery ztree 當前父節點下增加子節點有關問題_點擊事件增加子節點

tags:    時間:2013-12-09 23:36:46
jquery ztree 當前父節點下增加子節點問題_點擊事件增加子節點
一、功能描述:利用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>

推薦閱讀文章

Bookmark the permalink ,來源:互聯網