jquery zTree异步加载简单实例讲解
本文实例讲解了jqueryzTree异步加载，分享给大家供大家参考，具体内容如下
web.xml中Servlet配置如下：
<?xmlversion="1.0"encoding="UTF-8"?> <web-appversion="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页面：
<!DOCTYPEhtml>
<HTML>
<HEAD>
<TITLE>ZTREEDEMO-SimpleData</TITLE>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<linkrel="stylesheet"href="css/demo.css"type="text/css">
<linkrel="stylesheet"href="css/zTreeStyle/zTreeStyle.css"type="text/css">
<scripttype="text/javascript"src="js/jquery-1.4.4.min.js"></script>
<scripttype="text/javascript"src="js/jquery.ztree.core-3.2.js"></script>
<scripttype="text/javascript"src="js/jquery.ztree.excheck-3.2.js"></script>
<scripttype="text/javascript"src="js/jquery.ztree.exedit-3.2.js"></script>
<SCRIPTtype="text/javascript">
<!--
varsetting={
data:{
simpleData:{
enable:true
}
}
,async:{
enable:true,
url:"/testJQuery/getData",
autoParam:["id","name"],
otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter:filter
}
};
functionfilter(treeId,parentNode,childNodes){
if(!childNodes)returnnull;
for(vari=0,l=childNodes.length;i<l;i++){
childNodes[i].name=childNodes[i].name.replace('','');
}
returnchildNodes;
}
varzNodes=[
{id:1,pId:0,name:"parentNode1",open:true},
{id:11,pId:1,name:"parentNode11"},
{id:111,pId:11,name:"leafNode111"},
{id:112,pId:11,name:"leafNode112"},
{id:113,pId:11,name:"leafNode113"},
{id:114,pId:11,name:"leafNode114"},
{id:12,pId:1,name:"parentNode12"},
{id:121,pId:12,name:"leafNode121"},
{id:122,pId:12,name:"leafNode122"},
{id:123,pId:12,name:"leafNode123"},
{id:13,pId:1,name:"parentNode13",isParent:true},
{id:2,pId:0,name:"parentNode2",isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"),setting,zNodes);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>最简单的树--简单JSON数据</h1>
<h6>[文件路径:core/simpleData.html]</h6>
<divclass="content_wrap">
<divclass="zTreeDemoBackgroundleft">
<ulid="treeDemo"class="ztree"></ul>
</div>
</div>
</BODY>
</HTML>
Action代码：
publicclassTestTreeextendsHttpServlet{
@Override
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
//System.out.println("--------doGet--------");
this.doPost(request,response);
}
@Override
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
//System.out.println("--------doPost--------");
Stringid=request.getParameter("id");
Stringname=request.getParameter("name");
Stringlevel=request.getParameter("level");
StringotherParam=request.getParameter("otherParam");
System.out.println(id+"|"+name+"|"+level+"|"+otherParam);
JSONObjectjson=newJSONObject();
List<HashMap<String,Object>>list=newArrayList<HashMap<String,Object>>();
for(inti=0;i<5;i++){
HashMap<String,Object>hm=newHashMap<String,Object>();//最外层，父节点
hm.put("id",id+i);//id属性，数据传递
hm.put("name",id+i);//name属性，显示节点名称
hm.put("pId",id);
list.add(hm);
}
JSONArrayarr=newJSONArray(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'}]");
}
}
以上就是jqueryzTree异步加载实例分享给大家，希望对大家学习异步加载技术有所帮助。