当前位置: 代码迷 >> Web前端 >> ztree 异步动态加载 简略例子
  详细解决方案

ztree 异步动态加载 简略例子

热度:4284   发布时间:2012-09-05 15:19:35.0
ztree 异步动态加载 简单例子

?

1.下载ztree-2.6

?

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="/WEB-INF/pages/tlds/c.tld" prefix="c" %>
<%@ taglib uri="/WEB-INF/pages/tlds/fmt.tld" prefix="fmt" %>
<%@ taglib uri="/WEB-INF/pages/tlds/ecside.tld" prefix="ec" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>
  <head>
    <title>indexPage</title>
	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
	<meta http-equiv="expires" content="0"/>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ztree-2.6.js"></script>
    <script type="text/javascript">
	<!--
	var tree1;
	var zNodes =[];
	var setting;
		setting = {
			checkable: true,
			async: true,
			asyncUrl:"${pageContext.request.contextPath}/Test/wB2.action",
			asyncParam: ["id"],  // 异步加载时 需要 传递的参数  
			nameCol:"name",      //列名称
			isSimpleData: true,//简单数据模型,必须提供  treeNodeKey 和 treeNodeParentKey
			treeNodeKey:"id",
			treeNodeParentKey:"parentId",
			callback:{
//				beforeAsync: zTreeBeforeAsync,      // 异步加载事件之前得到相应信息
				asyncSuccess: zTreeOnAsyncSuccess,//异步加载成功的fun
				asyncError: zTreeOnAsyncError   //加载错误的fun
			}
		};
	$(document).ready(function(){
		refreshTree();
	});

	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){

	}
	function zTreeOnAsyncError(event, treeId, treeNode){
		alert("异步加载失败!");
	}

	function refreshTree() {
		tree1 = $("#tree1").zTree(setting, zNodes);
	}


  //-->    	
    </script>
  </head>
  <body>
		    <a href="${pageContext.request.contextPath}/Test/wB1.action">Bean1</a>
		    
	<TABLE border=0 width="700" class="tb1">
		<TR>
			<TD width=340px align=center valign=top>
			<div class="zTreeDemoBackground">
				<ul id="tree1" class="tree"></ul>
			</div>		
			</TD>
		</TR>
	</TABLE>		    
  </body>
</html>

??2. 后台实现action

Long nodeId=0;
if(id != null ){
	nodeId = Long.parseLong(id);
}
String syString = resService.getChildNode1(longId);	

		String syString = resService.getChildNode1(longId);	
		System.out.println(syString);
		getResponse().setContentType("text/json;charset=UTF-8");
		try {
			getResponse().getWriter().write(syString);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;

	public String getChildNode1(Long rootRes){
		StringBuilder sBuilder = new StringBuilder();
		if (rootRes == 0) {
			sBuilder.append("[");
			SysResource rootNode = resDao.queryRootRes();
			sBuilder.append("{");
				sBuilder.append("id: \"");
				sBuilder.append(rootNode.getId());
				sBuilder.append("\",");
				sBuilder.append("name: \"");
				sBuilder.append(rootNode.getResName());
				sBuilder.append("\",");
				sBuilder.append("isParent:");
				sBuilder.append(getChildNode(rootNode.getId()).size() == 0 ?  "false": "true");
			sBuilder.append("}");
			sBuilder.append("]");
		}else {
			int len = getChildNode(rootRes).size();
			sBuilder.append("[");
			for (int i = 0; i < len; i++) {
				sBuilder.append("{");
					sBuilder.append("id: \"");
					sBuilder.append(getChildNode(rootRes).get(i).getId());
					sBuilder.append("\",");
					sBuilder.append("name: \"");
					sBuilder.append(getChildNode(rootRes).get(i).getResName());
					sBuilder.append("\",");
					sBuilder.append("isParent:");
					sBuilder.append(getChildNode(getChildNode(rootRes).get(i).getId()).size() > 0 ? true : false);
				if (i!= (len-1)) {
					sBuilder.append("}");
					sBuilder.append(",");
				}
			}
			sBuilder.append("}");
			sBuilder.append("]");
		}

		return sBuilder.toString();
	}
?

请求结果1:[{id: "1",name: "物流管理系统",isParent:true}]

?

请求结果2:[{id: "2",name: "基本信息",isParent:false},{id: "5",name: "资源管理",isParent:true},{id: "4",name: "出库管理",isParent:false},{id: "3",name: "入库管理",isParent:false}]

?

?