dhtmlxtree是一个很不错的树形插件,前台界面和参数获取几乎可以全部由组件自己完成,而且很好的支持xml、json数据格式和各种事件(如单击,双击,拖拽,展开)。

    http://dhtmlx.com官网已经升级到3.0,现在本人使用的仍然是1.6专业版,后面的简单示例也是这个版本的。dhtmlx官网上面还有许多其他组件grid,menu,layout等,以后有机会可以学习一下。

   网上下载的“dhtmlxTree 2.1标准版(Std)+1.6专业版(Pro)”包,里面有示例,源码等内容十分全。

主要代码:

<div id="treeboxbox_tree" style="width:500; height:500;background-color:#f5f5f5;border :1px solid Silver; "/>

注:dhtmlxtree是利用div标签显示的,这里设置了树的位置,大小,背景颜色和边框。

tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);//通过div标签id创建树

tree.setImagePath("component/tree/codebase/imgs/csh_books/");//设置树的图片样式

tree.enableCheckBoxes(1);//设置显示CheckBoxes,不需要删除即可

tree.enableThreeStateCheckboxes(true);//设置CheckBoxes模式,默认为单选。这里设置为复选模式

tree.enableDragAndDrop(1);//是否支持拖拽,不需要删除即可


tree.setOnOpenHandler(tonopen);//打开事件,参数是:id和mode

tree.attachEvent("onOpenEnd",function(nodeId, event){alert("open end");});

//打开结束时间,第一个参数可以设置各种事件,具体参数见相关API,后面是回调函数。

tree.setOnClickHandler(tonclick);//单击事件,参数:id

tree.setOnCheckHandler(toncheck);//勾选事件,参数:id

tree.setOnDblClickHandler(tondblclick);

//双击事件,参数:id 如果开始双击事件,那么双击将无法展开树

tree.setDragHandler(tondrag);//拖拽事件,参数:id和id2 拖拽id和拖拽到得节点id

tree.setXMLAutoLoading("TreeServlet?task=data");//动态加载数据,可以是XML和JSON

tree.loadXML("TreeServlet?task=data");//加载数据

具体其他参数和方法见相关API。


通过上面的设置和事件的方法基本可以完成前台树的所有操作了,那么后台与数据库的操作呢?

首先我们应该对树结构的数据存储进行设计,我这里说下最常用的情况(主要属性ID,ParentID,Level),其实我们通过ID和父ID基本就可以拼接出一颗树了,我用的是迭代拼接XML格式,以提供数据,当然level层级可以更好的获取树结构。

主要JAVA迭代获取代码:

public String getTree() {

  StringBuffer sb = new StringBuffer("<?xml version="1.0" encoding="UTF-8"?>");

  sb.append("<tree id="0">");

  sb = recursionDate(sb, 1, 0);

  sb.append("</tree>");

  return sb.toString();

}


private StringBuffer recursionDate(StringBuffer sb, int level, int parentId) {

  Map<String, String> treeMap = getTree(level, parentId);

  Set<Map.Entry<String, String>> treeSet = treeMap.entrySet();

  if (treeSet.size() > 0) {

    for (Map.Entry<String, String> entry : treeSet) {

    sb.append("<item id="" + entry.getKey() + "" text=""+ entry.getValue() + "">");

    sb = recursionDate(sb, level + 1, Integer.parseInt(entry.getKey()));

    sb.append("</item>");

     }

  }

  return sb;

}


private Map<String, String> getTree(int level, int parentId)方法通过级别和父ID来查询level级别的数据,返回值是KEY为ID和VALUE为NAME的MAP,通过recursionDate方法的迭代查询构造出整棵树。这样树的动态数据就完成了。

下面就是增删改查了,方法都比较简单,通过树的事件来完成,数据可以用AJAX提交,然后返回成功失败,前台用dhtmlxtree方法增删改。

添加:

tree.insertNewItem(parentid,id,name,0,0,0,0,'SELECT');//parentid的子节点插入

tree.insertNewNext(parentid , id , name ,0,0,0,0,'SELECT');//parentid的同级节点插入

删除:

tree.deleteItem(id ,true);

修改名称:

setItemText(id,name,tip);

具体参数见示例或API。

这里主要强调一下拖拽。拖拽后不光要更新拖拽节点的parentid和level,还要更新所有子节点的level。更新节点parentId我就不用多说了,更新level这里有个方法:先查出拖拽前节点level和拖拽后节点level的差,然后更新所有子节点level减去差,获取所有子节点有2个方法:一个是通过oracle的迭代connect by prior ·· start with(具体用法可以百度),获取通过dhtmlxtree的方法getAllLeafs()。当然也可以自己用java代码迭代,但是比较麻烦。


作者:FLY的狐狸

转载请标明出处。



没有登录不能评论