树形展示数据——dhtmlxTree的使用

浏览数：37 / 时间：2015年06月09日

在Java Web项目开发中，一般用JSP做前台数据展示，后台通过SSH框架来进行高效开发，有流程的控制，业务的处理和对数据库的各种处理，而数据则存放在Oracle等选择的数据库中。现在大家想这样一个问题，用户和什么打交道最多？很简单，用户主要是通过页面和系统打交道呢？那么数据的展示方式很多程度上决定着用户对此系统的评价。这里简单总结一下，除了html能够展示的方式其它的几种比较友好，比较实用的数据展示方式。这篇博客，看一下如何将数据进行树形展示！

树形展示，就是将从数据库中查询的数据利用树的方式展现出来。那么什么数据适合树形展示呢？例如一些层级明确的机构信息，权限明确的职位信息等等？只要存在这种上下级，层次关系明确，在数据库中使用了自关联表来存储数据的信息都合适使用树形来展示，这样可以让用户很方便的找到根节点，还有每一节点的权利等等。操作系统中资源管理器的树形结构给大家带来的方便，相比大家都是受益匪浅的。

而在Java Web开发中，我们可以通过一些插件进行这个功能的实现，这里总结一下我使用的这个——dhtmlxTree，它能够使我们的数据展示成树的形状，可张可驰，非常方便。实现的大概图形：

一，首先说一下，它实现树形结构的原理吧，利用这个插件实现树形结构，需要我们将从数据库中查出来的有层次结构的数据进行递归处理写成层层嵌套的XML的文件，然后通过插件进行递归读取XML文件，将其展现成树形的结构。是js代码的强大封装。

二，先看一下它的简单使用吧！

1，action层，经过dao层，Service对想要查询数据的处理以后哦，在action层，需要我们将数据进行递归处理，通过输出流输出到浏览器上，让前台进行捕捉。这里看一下递归构建具有层次结构的xml文件字符串：

		/**
		 * 树构建器
		 * @author Administrator
		 */
		public class OrgTreeBuilder {
		
			//传入树的跟节点
			private Org root;
			//通过此来拼接xml文件，这里注意选取StringBuilder，效率更高
			private StringBuilder treeString = new StringBuilder(128);
			
			//构造方法，参数就是根节点
			public OrgTreeBuilder( Org root ) {
				this.root = root;
			}
			
			/**
			 * 构建树
			 * @return
			 */
			public String build() {
				//xml的表头
				treeString.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
				treeString.append("<tree id=\"0\">");
				//调用构建子节点的函数
				buildNode(root);
				treeString.append("</tree>");
				
				//将构建好的树，转换为字符串return,方便action的输出
				return treeString.toString();
			}
			
			/**
			 * 构建树形节点的内容
			 */
			private void buildNode( Org org ) {
				//注意拼接字符串一些特殊符号的处理
				treeString.append("<item text=\"");
				treeString.append(org.getName());
				treeString.append("\" id=\"");
				treeString.append(org.getId());
				treeString.append("\">");
				
				//查看此节点的子节点
				Set<Org> orgSet = org.getChildOrgSet();
				//如果有子节点，进行递归调用，调用自己这个函数
				for ( Org obj : orgSet ) {
					buildNode(obj);
				}
				
				treeString.append("</item>");
			}
		}

而，在action层中只需要将其进行输出为xml格式即可：

			// 输出XML格式的字符串
			response.setContentType("text/xml;charset=UTF-8");
			response.getWriter().print(obj);

2，这里需要注意生成的层次结构的xml文件是有一定规范的，看一下：

			<?xml version="1.0" encoding="utf-8"?>
			<tree id="0">
			   <item text="xxxxx" id="-1"  open="1"   checked="1">
					<item text="yyyy" id="1">
						<item text="zzzz" id="2"/>
					</item>
			   </item>
			</tree>

简单说一下其中参数的含义：

id : 表示节点的唯一性标识

text : 表示节点的显示名称

open : 表示节点是否需要展开，取值任意

checked : 表示节点是否被完全选中，取值任意（这里需要注意，当一个节点的所有子节点都被选中时，表示完全选中，否则为不完全选中，在这里，树形的选中状态有三种。还是方便数据的获取和显示。）

3，在JSP页面中需要引入我们放这颗树的位置，这里提供一个div即可，然后就需要我们靠JS代码来完成功能了。看一下

HTML:<divid="treeboxbox_tree"></div>

JS:

//创建树形组件对象

tree=newdhtmlXTreeObject("treeboxbox_tree","100%","100%",0);

// 设置组件的皮肤（样式）

tree.setImagePath("dhtmlxtree/imgs/csh_yellowbooks/");