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/1.js"></script> </head> <body> <div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul></div> </body> </html> js 复制代码代码如下: 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 { } }

　　推荐阅读

　　js自定义事件及事件交互原理概述(一)

在JS中事件是JS与浏览器交互的主要途径。事件是一种叫做观察者的设计模式，这是一种创建松散耦合代码的技术。对象可以发布事件，用来表示在该对象生命周期中某个有趣的时刻到了。然后其他对象可以观察该对象，等待>>>详细阅读

本文标题：jquery zTree异步加载简单实例分享

地址：http://www.17bianji.com/kaifa2/JS/22391.html

1/2 1