jquery zTree异步加载实例

来源：互联网发布：贺知章回乡偶书编辑：程序博客网时间：2024/05/16 19:22

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 {@Overridepublic void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//System.out.println("--------doGet--------");this.doPost(request, response);}@Overridepublic 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'}]");}}