DHTMLXTree的使用

经过这几天对DHTMLXTree的折腾总算是有点眉目了，领导催得紧，组长紧的催。唉，把握这次机会来好好总结一下DHTMLXTree。

还是老套路，首先来简单了解一下DHTMLXTree。

DHTMLXTree是DHX系列其中关于树的部分，另外还有像DHTMLXGrid控件。基本都是使用js来实现tree的样式和数据加载，支持的格式有xml、json。有下面几个特点：

特点

• 支持界面的拖拽

• 效率高

  在加载数据量比较大的时候能够快速的加载，性能比较好。

• 界面样式特别丰富

• API 操作起来比较简单

先来看看效果图

主要代码，这里仅列出部分主要的代码，有兴趣的朋友可以亲自试试

function loadTree() {

    //置空将要放置tree的div
    document.getElementById("doctree_box").innerHTML = "";
    //设置tree对象大小
    var tree = new dhtmlXTreeObject("doctree_box", "100%", "100%", 0);
    //显示样式
    tree.setImagePath("${ctx}/codebase/imgs/");
    //点击tree节点触发的事件
    tree.setOnClickHandler( function(id) {          
        var type = tree.getUserData(id, "type");
        if(null==type||""==type){//||"1"==type
            rightFrame.location.href = "loadtreeservice!list.action?viewflag=1&funmenuId=${funmenuId}";
            return;
        }else{
            openPathDocs(id);
        }
    });
    tree.setXMLAutoLoadingBehaviour("function");
    //当树调整自动加载树（用来加载下一级菜单）
    tree.setXMLAutoLoading(function(item_id){
        var id = item_id;
        //获取userdata节点的type属性的值
        var type = tree.getUserData(item_id, "type");           
        item_id = item_id.substring(0,item_id.indexOf('_'));            
        tree.loadXML("loadtreeservice!open_tree.action?id="+item_id+"&type="+type + "&itemid="+id+"&funmenuId=${funmenuId}");

    });
    //初始化tree
    tree.loadXML("loadtreeservice!init_tree.action?d="
            + Math.random(), function() {
        tree.openItem("${parentId}");
    });
}

以上是用来加载tree的前台js，其实主要就是这里。后台可以根据系统需要用xml或者json来返回数据，

以下是一种xml格式形式。

    public String inittree_() {

    StringBuffer sb = new StringBuffer();

    Department root = departmentManager
            .getDeptById(depId);
    //拼接xml格式
    sb.append("<?xml version=\"1.0\" encoding='utf-8'?><tree id=\"0\"><item id=\""+ root.getId() + "\" text=\"" + root.getName() + "\">");
    //拼接内部item的数据
    //格式：<item id="**" text="显示的文字"></item>
    buildTree(sb, list);

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

    renderXML(sb.toString(), "UTF-8");

    return null;

}

这里如果存在tree之间的嵌套的情况就需要在tree的id上进行处理。

注意事项：

• 根结点的tree的id始终都是 0 。
• 需要将tree之间进行嵌套的时，需要将子树的id设置为上一节点的id_1.以此类推，id_2.这样保证两棵树能够嵌套在一起显示。

常见错误

• load xml error。 这个错误是表示返回的数据不是xml格式的数据，拼接的过程中有问题。
• XML Refer to not existing parent error 。这个是在使用tree嵌套的时候，id之间的匹配错误，子tree的无法找到父节点。

这次这个tree确实让我很受伤啊，还是在调试的时候太过急躁，归根结底还是技术积累。

# 为将之道,当先治心,泰山崩于前而色不变,麋鹿兴于左而目不瞬。共勉！ #