dhtml Tree 异步动态加载容易例子 _HTML/CSS

dhtml Tree 异步动态加载简单例子

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="/WEB-INF/pages/tlds/c.tld" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="StyleSheet" href="${ctx }/css/dhtmlxtree.css" type="text/css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/dhtmlxcommon.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/dhtmlxtree.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>

</head>
<body>
	<table>
		<tr>
			<td>
				<div id="left_tree">
					<script type="text/javascript">
							tree = new dhtmlXTreeObject("left_tree","100%","100%",0);
							//tree.setSkin('dhx_skyblue');
							tree.setImagePath("${pageContext.request.contextPath}/images/imgs/csh_bluebooks/");
							//每次点击节点调用的url
						    tree.setXMLAutoLoading("${pageContext.request.contextPath}/Frame/makeSysTree.action");
						    //首次加载的节点调用的url 
							tree.loadXML("${pageContext.request.contextPath}/Frame/makeSysTree.action?id=0");
							tree.setOnClickHandler(function() {
							
							});
					</script>
				</div>	
			</td>
		</tr>
	</table>
</body>

后台

1.Service

	public String generateMenuTree(Long rootRes) {
		StringBuilder sBuilder = new StringBuilder();
		sBuilder.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
		sBuilder.append("<tree id=\"");
		sBuilder.append(rootRes);
		sBuilder.append("\">");
		if (rootRes == 0) {
			SysResource rootNode = resDao.queryRootRes();
			sBuilder.append("<item text=\"");
			sBuilder.append(rootNode.getResName());
			sBuilder.append("\" id=\"");
			sBuilder.append(rootNode.getId());
			sBuilder.append("\" child=\"");
			sBuilder.append(getChildNode(rootNode.getId()).size() == 0 ? "0" : "1");
			sBuilder.append("\" />");
		}else {
			for(SysResource res:getChildNode(rootRes)){
				sBuilder.append("<item text=\"");
				sBuilder.append(res.getResName());
				sBuilder.append("\" id=\"");
				sBuilder.append(res.getId());
				sBuilder.append("\" child=\"");
				sBuilder.append(getChildNode(res.getId()).size() == 0 ? "0" : "1");
				sBuilder.append("\" />");
			}			
		}
		sBuilder.append("</tree>");
		return sBuilder.toString();
	}

2.action

	public String makeSysTree(){
		String sysResTreeJson = resService.generateMenuTree(Long.parseLong(id));
		System.out.println(sysResTreeJson);
		getResponse().setContentType("text/xml;charset=utf-8");
		try {
			getResponse().getWriter().write(sysResTreeJson);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

每次的请求的结果

1.<?xml version="1.0" encoding="utf-8"?><tree id="0"><item text="物流管理系统" id="1" child="1" /></tree>
2.<?xml version="1.0" encoding="utf-8"?><tree id="1"><item text="基本信息" id="2" child="0" /><item text="资源管理" id="5" child="1" /><item text="出库管理" id="4" child="0" /><item text="入库管理" id="3" child="0" /></tree>?