jquery zTree异步加载实例

最新推荐文章于 2021-03-30 17:44:03 发布

转载最新推荐文章于 2021-03-30 17:44:03 发布 · 384 阅读

文章标签：

#ztree #异步

jquery zTree异步加载实例专栏收录该内容

1 篇文章

订阅专栏

jquery zTree异步加载实例

web.xml中Servlet配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	
	
	<servlet>
		<servlet-name>getDataServlet</servlet-name>; 
		<servlet-class>testTree.TestTree</servlet-class>; 
	</servlet>
	
	<servlet-mapping>
	<servlet-name>getDataServlet</servlet-name>; 
	<url-pattern>/getData</url-pattern>; 
	</servlet-mapping>

</web-app>

JSP页面：

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ZTREE DEMO - Simple Data</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="css/demo.css" type="text/css">
	<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.core-3.2.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.excheck-3.2.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.exedit-3.2.js"></script>
	<SCRIPT type="text/javascript">
		<!--
		var setting = {
			data: {
				simpleData: {
					enable: true
				}
			}
			,async: {
				enable: true,
				url:"/testJQuery/getData",
				autoParam:["id", "name"],
				otherParam:{"otherParam":"zTreeAsyncTest"},
				dataFilter: filter
			}
		};
		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;
		}
		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);
		});
		//-->
	</SCRIPT>
 </HEAD>

<BODY>
<h1>最简单的树 -- 简单 JSON 数据</h1>
<h6>[ 文件路径: core/simpleData.html ]</h6>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>
</BODY>
</HTML>

Action代码：

public class TestTree extends HttpServlet {

	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		System.out.println("--------doGet--------");
		this.doPost(request, response);
	}

	@Override
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		System.out.println("--------doPost--------");
		String id = request.getParameter("id");
		String name = request.getParameter("name");
		String level = request.getParameter("level");
		String otherParam = request.getParameter("otherParam");
		System.out.println(id + "|" + name + "|" + level + "|" + otherParam);
		
		JSONObject json = new JSONObject();
		List<HashMap<String,Object>> list = new ArrayList<HashMap<String,Object>>();
		
		for(int i = 0; i < 5; i++){
			HashMap<String,Object> hm = new HashMap<String,Object>();   //最外层，父节点           
			hm.put("id", id + i);//id属性  ，数据传递  
			hm.put("name", id + i); //name属性，显示节点名称  
			hm.put("pId", id);
			
			list.add(hm);
		}
		
		JSONArray arr = new JSONArray(list);
		json.put("success", true);
		json.put("arr", arr);
		
		System.out.println("--------json------" + json.toString());
		response.getWriter().write(arr.toString());
//		response.getWriter().write(json.toString());
//		response.getWriter().write("[{pId:'2',name:'20',id:'20'}]");
	}

}

引自http://blog.csdn.net/niuhea/article/details/7595887