dhtmlTree一个比较好用的tree插件，使用javascrpt实现。
引用步骤：
1、官网下载：http://dhtmlx.com/docs/products/dhtmlxTree/
2、解压后如图：
3、目录结构：
4、代码写法：
- 详见35到45行代码为初始化dhtmlxtree写法，详细参数说明：http://www.cnblogs.com/draem0507/archive/2013/02/01/2889317.html
- 可通过xml、json、js等参数传到前台来构建树。
- 这里我用的xml格式如下图：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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">
<link type="text/css" rel="stylesheet" href="commonUtil/dhtmlTree/dhtmlxtree.css" />
</head>
<body>
<form>
<table style="width:100%;align:center">
<tr>
<td valign="top" align="center">
<div id="treeboxbox_tree" style="width:300px; height:300px;background-color:#f5f5f5;border :1px solid Silver;"></div>
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="提交" onclick="save()"/>
</td>
</tr>
</table>
</form>
</body>
<script src="commonUtil/dhtmlTree/dhtmlxcommon.js"></script>
<script src="commonUtil/dhtmlTree/dhtmlxtree.js"></script>
<script type="text/javascript">
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setSkin(‘dhx_skyblue‘);
tree.setImagePath("commonUtil/dhtmlTree/imgs/csh_bluebooks/");
tree.enableCheckBoxes(1);
var localObj = window.location;
var contextPath = localObj.pathname.split("/")[1];
var basePath = localObj.protocol+"//"+localObj.host+"/"+contextPath;
var xml = basePath + "/xml/user.xml";
tree.loadXML(xml);
// 三种状态为:选择/不选择/一些子被选择(不是全部),激活多选框使用以下方法:
tree.enableThreeStateCheckboxes(true);
// 选中多选框
// tree.setCheck(‘21‘,1);
// 多选框失效
// tree.disableCheckbox(21,true);
function save(){
alert(tree.getAllUnchecked());
}
</script>
</html>
<?xml version=‘1.0‘ encoding=‘UTF-8‘?> <tree id=‘0‘> <item call=‘1‘ id=‘301000000‘ im0=‘tombs.gif‘ im1=‘tombs.gif‘ im2=‘iconSafe.gif‘ text=‘tvAdInsight‘> <item id=‘61‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘广告查看‘/> <item id=‘62‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘用户管理‘/> <item id=‘63‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘广告位管理‘/> <item id=‘64‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘广告录入‘/> <item id=‘65‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘广告审核发布‘/> <item id=‘66‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘客户管理‘/> <item id=‘67‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘广告统计‘/> <item id=‘68‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘日志查询‘/> </item> <item call=‘1‘ id=‘302000000‘ im0=‘tombs.gif‘ im1=‘tombs.gif‘ im2=‘iconSafe.gif‘ text=‘LiveEpg Portal‘> <item id=‘302000001‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘LiveEpg广告管理系统‘/> <item id=‘302010000‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘商券查询‘/> <item id=‘302020000‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘商券录入‘/> <item id=‘302030000‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘商券发布‘/> <item id=‘302040000‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘商券模板‘/> <item id=‘302050000‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘统计报表‘/> <item id=‘302060000‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘系统设置‘/> <item id=‘302070000‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘合作方管理‘/> <item id=‘302080000‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘业务代表管理‘/> <item id=‘302090000‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘日志查询‘/> </item> <item call=‘1‘ id=‘304000000‘ im0=‘tombs.gif‘ im1=‘tombs.gif‘ im2=‘iconSafe.gif‘ text=‘性能监测‘> <item id=‘400000004‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘暂无服务‘/> </item> <item call=‘1‘ id=‘305000000‘ im0=‘tombs.gif‘ im1=‘tombs.gif‘ im2=‘iconSafe.gif‘ text=‘系统日志‘> <item id=‘400000044‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘暂无服务‘/> </item> <item call=‘1‘ id=‘306000000‘ im0=‘tombs.gif‘ im1=‘tombs.gif‘ im2=‘iconSafe.gif‘ open=‘1‘ select=‘1‘ text=‘LiveEpg Portal‘> <item id=‘306000001‘ im0=‘book_titel.gif‘ im1=‘book.gif‘ im2=‘book_titel.gif‘ text=‘LiveEpg广告管理系统‘/> </item> </tree>附XML中属性含义：
除了用xml可以进行对数据格式化外,还可以利用js,json对象将数据从后台传入页面,js和json基本都是利用多维数组的形式将数据传入页面
在XML中
tree标签是定义树的root节点ID
只有id属性
Item标签被包含于tree标签用于定义节点属性,可设置 多个属性包括
id – 节点ID ,
text—节点名 ,
open – 在载入时是否显示打开
select – 在载入时是否被选中
child – 是否具有子节点(动态加载时必须有此属性)
im0 – 沒有子节点的图示
im1 – 关闭节点图示
im2 – 开启节点图示