前台技术--dhtrmlxTree使用

dhtmlTree一个比较好用的tree插件,使用javascrpt实现。


引用步骤:

1、官网下载:http://dhtmlx.com/docs/products/dhtmlxTree/

2、解压后如图:

前台技术--dhtrmlxTree使用_第1张图片

3、目录结构:


4、代码写法:

  1. 详见35到45行代码为初始化dhtmlxtree写法,详细参数说明:http://www.cnblogs.com/draem0507/archive/2013/02/01/2889317.html
  2. 可通过xml、json、js等参数传到前台来构建树。
  3. 这里我用的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 – 开启节点图示

参考网站:http://blog.itblood.com/dhtmlxtree-chinese-api.html

你可能感兴趣的:(dhtmlxtree)