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="提交" οnclick="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 – 开启节点图示