一个简单的dhtmlxTree实现_dhtmlxtreeobject 搜索-优快云博客

最近一直在做后台的一些管理系统，用到dhtmlxTree的内容比较多，以前没有接触过，因此整理了一个简单的Demo（基于springMVC）。

首先是页面部分:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="STYLESHEET" type="text/css" href="/dhtmlx/dhtmlxTree/codebase/dhtmlxtree.css"> 
<script src="/dhtmlx/window/codebase/dhtmlxcommon.js"></script>
<script src="/dhtmlx/dhtmlxTree/codebase/dhtmlxtree.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.4.min.js"></script>
</head>
<body>
<div>
	<div id="treeboxbox_tree" style="float:left;width:300px;height:500px;background-color:#f5f5f5;border :1px solid Silver; "/>
	</div>
	<div style="margin-left:10px;float:left;width:300px;height:500px;background-color:#f5f5f5;border :1px solid Silver; ">
		<span id="message1"></span><br>
		<span id="message2"></span><br>
		<span id="message3"></span><br>
	</div>
	<input type="button" onclick="foc();" value="获取焦点">
</div>
</body>
<script type="text/javascript">
function treeclick(){
	 $("#message1").html("当前所选节点id"+tree.getSelectedItemId());
	 $("#message2").html("当前所选节点内容"+tree.getSelectedItemText());
	 //获取节点状态：0 - 没有子节点, -1 - 节点合拢, 1 - 节点展开
	 $("#message3").html("当前节点状态"+tree.getOpenState(tree.getSelectedItemId()));
}
function foc(){
	 tree.selectItem(3);
}
var tree;
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0); 
tree.setSkin('dhx_vista'); 
tree.setImagePath("/dhtmlx/dhtmlxTree/codebase/imgs/csh_vista/"); 
tree.setOnClickHandler(treeclick);
//加载完成后调用function
tree.loadXML("/DHTMLXTree_Demo/test/tree.do",function(){
	//获取焦点
	tree.selectItem(3);
	treeclick();
});

</script>
</html>

然后是控制器部分：

@RequestMapping
	public void tree(HttpServletResponse response){

		String xmls = initXML();
		response.setContentType("application/xml");
		response.setCharacterEncoding("UTF-8");
		// 利用Writer直接输出到页面
		PrintWriter out = null;
		try {
			out = response.getWriter();
			out.print(xmls);
		} catch (IOException e) {
			e.printStackTrace();
		} finally {
			if (out != null){
				out.close();
			}
		}		
	}

	//初始化一个treeXML
	public String initXML(){

		StringBuffer sb = new StringBuffer();
		sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\" ?>");
		sb.append("<tree id=\"0\">");
		sb.append("<item text=\"").append("一级节点").append("\" open=\"1\" id=\"").append("1").append("\">\n");
		sb.append("<item text=\"").append("二级节点1(展开)").append("\" open=\"1\" id=\"").append("2").append("\">\n");
		sb.append("<item text=\"").append("三级节点1").append("\" open=\"1\" id=\"").append("3").append("\">\n");
		sb.append("</item>\n");
		sb.append("<item text=\"").append("三级节点2").append("\" open=\"1\" id=\"").append("4").append("\">\n");
		sb.append("</item>\n");
		sb.append("</item>\n");
		sb.append("<item text=\"").append("二级节点2(不展开)").append("\" id=\"").append("5").append("\">\n");
		sb.append("<item text=\"").append("三级节点3(重复id)").append("\" id=\"").append("6").append("\">\n");
		sb.append("</item>\n");
		sb.append("<item text=\"").append("三级节点4(重复id)").append("\"  id=\"").append("6").append("\">\n");
		sb.append("</item>\n");
		sb.append("</item>\n");
		sb.append("</item>\n");
		sb.append("</tree>");
		return sb.toString();
	}

实现效果大概就是这样的：