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

115 阅读 0 评论 76 点赞

我是靠谱客的博主眼睛大大门，最近开发中收集的这篇文章主要介绍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, treeId, 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, pId:11, name:"leafNode 112"}, 
{ id:113, pId:11, name:"leafNode 113"}, 
{ id:114, pId:11, name:"leafNode 114"}, 
{ id:12, pId:1, name:"parentNode 12"}, 
{ id:121, pId:12, name:"leafNode 121"}, 
{ id:122, pId:12, name:"leafNode 122"}, 
{ id:123, pId:12, name:"leafNode 123"}, 
{ id:13, pId:1, name:"parentNode 13", isParent:true}, 
{ id:2, pId:0, 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, 0, "zb1", true); 
ZtreeBean zb2 = new ZtreeBean(2, 1, "zb2", false); 
ZtreeBean zb3 = new ZtreeBean(2, 0, "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, HttpServletResponse response) throws ServletException, IOException { 
doGet(request, response); 
} 
public void init() throws ServletException { 
} 
} 