ホームページ >ウェブフロントエンド >jsチュートリアル >jquery zTreeの非同期読み込みの簡単な例の説明_jquery
jquery zTreeの非同期読み込みの簡単な例の説明_jquery
- WBOYオリジナル
- 2016-05-16 15:13:421176ブラウズ
この記事の例は jquery zTree の非同期読み込みを説明しており、参考のために皆さんと共有します。具体的な内容は次のとおりです。
web.xml のサーブレット構成は次のとおりです:
<?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>
アクションコード:
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 の非同期読み込みの例です。皆さんが非同期読み込み技術を学ぶのに役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。