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

首先提供Ztree官方网站http://www.ztree.me。
Ztree是一个使用jQuery实现的JSP页面的各种功能树，本文介绍一个异步获取数据到下拉树的实现方式。
当前版本Ztree 3.5.01
simple.html

 
<!DOCTYPE html> 
<html> 
<head> 
<title>simple.html</title> 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" type="text/css" href="css/zTreeStyle.css"> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script> 
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.min.js"></script> 
<!-- <script type="text/javascript" src="js/standard.js"></script> --> 
<script type="text/javascript" src="js/1.js"></script> 
</head> 
<body> 
<div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul></div> 
</body> 
</html> 

复制代码代码如下:

 
var setting = { 
data: { 
simpleData: { 
enable: true 
// idKey:"id",
// pIdKey:"pId",
} 
} 
,async: { 
enable: true,
url:"/Java_Solr/servlet/ZTreeSerlvet",
autoParam:["id","name"],
otherParam:{"otherParam":"zTreeAsyncTest"},
// dataType: "text",//默认text 
// type:"get",//默认post 
dataFilter: filter //异步返回后经过Filter 
} 
,callback:{ 
// beforeAsync: zTreeBeforeAsync,// 异步加载事件之前得到相应信息 
asyncSuccess: zTreeOnAsyncSuccess,//异步加载成功的fun 
asyncError: zTreeOnAsyncError,//加载错误的fun 
beforeClick:beforeClick //捕获单击节点之前的事件回调函数 
} 
}; 
//treeId是treeDemo 
function filter(treeId,parentNode,childNodes) { 
if (!childNodes) return null; 
for (var i=0,l=childNodes.length; i<l; i++) { 
childNodes[i].name = childNodes[i].name.replace('',''); 
} 
return childNodes; 
} 
function beforeClick(treeId,treeNode){ 
if(!treeNode.isParent){ 
alert("请选择父节点"); 
return false; 
}else{ 
return true; 
} 
} 
function zTreeOnAsyncError(event,treeId,treeNode){ 
alert("异步加载失败!"); 
} 
function zTreeOnAsyncSuccess(event,treeNode,msg){ 

} 
/***********************当你点击父节点是,会异步访问servlet,把id传过去*****************************/ 
var zNodes=[]; 
/* var zNodes =[ 
{ id:1,pId:0,name:"parentNode 1",open:true},
{ id:11,pId:1,name:"parentNode 11"},
{ id:111,pId:11,name:"leafNode 111"},
{ id:112,name:"leafNode 112"},
{ id:113,name:"leafNode 113"},
{ id:114,name:"leafNode 114"},
{ id:12,name:"parentNode 12"},
{ id:121,pId:12,name:"leafNode 121"},
{ id:122,name:"leafNode 122"},
{ id:123,name:"leafNode 123"},
{ id:13,name:"parentNode 13",isParent:true},
{ id:2,name:"parentNode 2",isParent:true} 
]; */ 
$(document).ready(function(){ 
$.fn.zTree.init($("#treeDemo"),setting,zNodes); 
}); 

得到zTree对象 :var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
ZtreeServlet

复制代码代码如下:

 
package org.hzy.servlets; 
import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.ArrayList; 
import java.util.List; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import org.hzy.bean.ZtreeBean; 
import com.alibaba.fastjson.JSON; 
public class ZTreeSerlvet extends HttpServlet { 
public void destroy() { 
super.destroy(); 
} 
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { 
System.out.println(request.getParameter("id") + " " + request.getParameter("name") + " " + request.getParameter("otherParam")); 
response.setCharacterEncoding("UTF-8"); 
PrintWriter out = response.getWriter(); 
ZtreeBean zb = new ZtreeBean(0,-1,"zb",true); 
ZtreeBean zb1 = new ZtreeBean(1,"zb1",true); 
ZtreeBean zb2 = new ZtreeBean(2,1,"zb2",false); 
ZtreeBean zb3 = new ZtreeBean(2,"zbss",true); 
List<ZtreeBean> list = new ArrayList<ZtreeBean>(); 
list.add(zb); 
list.add(zb1); 
list.add(zb2); 
list.add(zb3); 
String str = JSON.toJSONString(list); 
out.print(str); 
} 
public void doPost(HttpServletRequest request,IOException { 
doGet(request,response); 
} 
public void init() throws ServletException { 
} 
} 

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

相关文章