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

          在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/");

// 使用复选框树形组件（为可选两行代码）

tree.enableCheckBoxes(1); // 1：表示加入checkbox，0：表示取消checkbox

tree.enableThreeStateCheckboxes(true);// 是否级联选中

 

// 加载数据，这里写入我们的action访问路径即可

tree.loadXML("/org/buildTree.action");

 

          4，有复选框（checkbox）的树，我们可以进行增加，删除，修改，查询等操作，这里看一下对树形节点的常用操作吧！

a， 设置点击事件

tree.setOnClickHandler(doOnClick);

functiondoOnClick(){

parent.orgWorkareaFrame.location="detail.html";

}

 

b,增加节点

tree.insertNewChild(父节点ID, 新增节点ID, 新增节点名称);

 

c, 修改节点

tree.setItemText(节点ID, 新节点名称);

 

d， 删除节点

tree.deleteItem(节点ID, 删除后是否选择父节点);

 

e, 查询节点

tree.getSelectedItemId(); // 获取被选中的节点ID

tree.getAllChecked(); // 获取完全选中状态复选框的节点ID

tree.getAllCheckedBranches(); // 获取所有被选中的复选框（包含未完全选中状态）的节点ID

tree.hasChildren(父节点ID); // 获取节点的所有子节点的数量，用于判断是否存在子节点

 

          当然这里是一些常用的对树的操作，更多的操作可以看一下这里：dhtmlxTree介绍

 

 

         这里是对dhtmlxTree进行了简单总结，是生成树的一个非常易用实用的插件，可以使我们的系统显示的更加合理，大大提高用户的体验度。当然了还有一些其他生成树的插件，再用到以后再进行总结吧。

 

           这里我们是将一些有层次结构的数据用树进行了展示，但是有些情况下，还需要我们将数据展现成饼状图，柱状图等，或者需要利用excel进行下载等，这也是经常会遇见的，所以后边两篇博客，进行简单总结。