jquery zTree 비동기 로딩 간단한 예제 Sharing

jquery zTree 비동기 로딩 간단한 예제 Sharing_jquery

WBOY

풀어 주다： 2016-05-16 17:42:14

원래의

1163명이 탐색했습니다.

먼저 Ztree 공식 웹사이트 http://www.ztree.me를 제공하세요.
Ztree는 jQuery를 사용하여 구현된 JSP 페이지의 다양한 기능 트리입니다. 이 기사에서는 드롭다운 트리로 데이터를 비동기적으로 가져오는 구현 방법을 소개합니다.
현재 버전 Ztree 3.5.01
simple.html

코드 복사 코드는 다음과 같습니다.

simple.html -equiv= "keywords" content="keyword1,keyword2,keyword3"> 
 "content- type" content="text/html; charset=UTF-8"> 
 🎜>< ;script type="text/javascript" src="js/jquery.js"> 

 " src= "js/1.js"> 

js 

코드 복사

코드는 다음과 같습니다.

var 설정 = { data: { simpleData: { enable: true // idKey: "id",

// pIdKey: "pId",

} 
} 
, async: { 
 활성화: true, 
url:"/Java_Solr/servlet/ZTreeSerlvet", 
autoParam:["id", "name"], 
otherParam:{"otherParam":"zTreeAsyncTest"}, 
// dataType: " text",//기본 텍스트 
// type: "get",//기본 게시물 
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; ichildNodes[i].name = childNodes[i].name.replace('', ''); 
} 
return childNodes; 
} 
function beforeClick(treeId,treeNode){ 
if(!treeNode.isParent){ 
alert("부모를 선택하세요. node"); 
 false 반환; 
}else{ 
 true 반환; 
} 
} 
function zTreeOnAsyncError(event, treeId, treeNode){ 
alert("Asynchronous 로드 실패!"); 
} 
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){ 

} 
/***********************부모 노드를 클릭하면 서블릿이 비동기적으로 액세스되고 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, 이름:"leafNode 113"}, 
{ id:114, pId:11, 이름:"leafNode 114"}, 
{ id:12, pId:1, 이름:" parentNode 12"}, 
{ id:121, pId:12, name:"leafNode 121"}, 
{ id:122, pId:12, name:"leafNode 122"}, 
{ id :123, pId:12, 이름:"leafNode 123"}, 
{ id:13, pId:1, 이름:"parentNode 13", isParent:true}, 
{ id:2, pId:0 , 이름:"parentNode 2" , isParent:true} 
] */ 
$(document).ready(function(){ 
$.fn.zTree.init($("#treeDemo" ), 설정, zNodes) 
}); 

 
zTree 객체 가져오기: var zTree = $.fn.zTree.getZTreeObj("treeDemo"), 
ZtreeServlet 

코드 복사

코드는 다음과 같습니다.

 
패키지 org.hzy.servlets; 
java.io.IOException 가져오기; 
java.io.PrintWriter 가져오기; 
java.util.ArrayList 가져오기; 
java.util.List 가져오기; 
javax.servlet.ServletException 가져오기; 
javax.servlet.http.HttpServlet 가져오기; 
javax.servlet.http.HttpServletRequest 가져오기; 
javax.servlet.http.HttpServletResponse 가져오기; 
org.hzy.bean.ZtreeBean 가져오기; 
com.alibaba.fastjson.JSON 가져오기; 
공용 클래스 ZTreeSerlvet은 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 출력 = 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 = new ArrayList(); 
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()에서 ServletException 발생 { 
} 
} 