做者：wallimn

時間 2019-12-11

標籤 wallimn 简体版

原文原文鏈接

通過這幾天對DHTMLXTree的折騰總算是有點眉目了。領導催得緊。組長緊的催。css

唉，把握此次機會來好好總結一下DHTMLXTree。html

仍是老套路。首先來簡單瞭解一下DHTMLXTree。前端

DHTMLXTree是DHX系列當中關於樹的部分。另外還有像DHTMLXGrid控件。基本都是使用js來實現tree的樣式和數據載入。支持的格式有xml、json。有下面幾個特色：java

特色

支持界面的拖拽mysql
效率高web

在載入數據量比較大的時候能夠高速的載入，性能比較好。spring
界面樣式特別豐富sql
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上進行處理。

注意事項：