jquery zTree异步加载简单实例讲解
时间：2020-10-15 09:31:39|栏目：jquery|点击： 次
本文实例讲解了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'}]");
}
}
以上就是jquery zTree异步加载实例分享给大家，希望对大家学习异步加载技术有所帮助。
栏 目：jquery
本文地址：http://www.codeinn.net/misctech/11458.html
