jquery zTree异步加载简单实例分享
发布时间:2020-12-14 22:26:53 所属栏目:资源 来源:网络整理
导读:首先提供Ztree官方网站http://www.ztree.me。 Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式。 当前版本Ztree 3.5.01 simple.html 复制代码 代码如下: !DOCTYPE html html head titlesimple.html/title meta
首先提供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> 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,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 { } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |