一、java
後臺查詢到需要使用的tree數資料，然後分局tree的格式進行封裝，然後直接使用ztree外掛進行繫結。

資料庫查詢 得到表資料行的集合

    // 模擬資料庫查詢 得到表資料行的集合
    public List<Map<String,Object>> getRows(){

        List<Map<String,Object>> dataList = new ArrayList<Map<String,Object>>();
        Map<String,Object
 
> row = new HashMap<String,Object>();
        row.put("id","1");
        row.put("username","玄清");
        row.put("invitationid","0");
        dataList.add(row);

        row = new HashMap<String,Object>();
        row.put("id","2");
        row.put("username","張三");
        row.put("invitationid"
 
,"1");
        dataList.add(row);

        row = new HashMap<String,Object>();
        row.put("id","3");
        row.put("username","李四");
        row.put("invitationid","2");
        dataList.add(row);

        row = new HashMap<String,Object>();
        row.put("id","4");
        row.put("username"
 
,"王五");
        row.put("invitationid","3");
        dataList.add(row);

        row = new HashMap<String,Object>();
        row.put("id","5");
        row.put("username","張小明");
        row.put("invitationid","4");
        dataList.add(row);

        row = new HashMap<String,Object>();
        row.put("id","6");
        row.put("username","趙六");
        row.put("invitationid","1");
        dataList.add(row);

        return  dataList;
    }

將查詢到的資料進行tree封裝

  // 服務端拼接字串，也可直接返回陣列然後在瀏覽器端拼接字串
    public String assembly(List<Map<String,Object>> paramList){

        StringBuffer resultStr = new StringBuffer();
        resultStr.append("[");
        for (Map<String,Object> obj: paramList) {

            // resultStr.append("{'id':" + obj.get("id")+",'pId':" + obj.get("invitationid")+",'name':"+obj.get("username")+"}");
            resultStr.append("{");
            resultStr.append("'id':'" + obj.get("id")+"',");
            if (null == obj.get("invitationid") || "0".equals(obj.get("invitationid")))// 僅展開頂級節點
                resultStr.append("'pId':'0', open:'true',");
            else
                resultStr.append("'pId':'" + obj.get("invitationid")+"', open:'true',");// 展開子級節點
            resultStr.append("'name':'" + obj.get("username")+"'");
            resultStr.append("},");
        }
        // 去除最後一個逗號
        resultStr.deleteCharAt(resultStr.length()-1);
        resultStr.append("]");
        return resultStr.toString();
    }

將封裝的tree樹資料在控制檯列印（正式專案將資料返回前端）

// 呼叫方法
    public static void main(String[] args) throws Exception{

        MenuTest01 mt = new MenuTest01();
        List<Map<String,Object>> dataList = mt.getRows();
        System.out.println(mt.assembly(dataList));

    }

至此java後臺的資料傳輸就已經搞定了。

二、jQuery樹
ztree官方文件：ztree官網

引用樣式

<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
    <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>

js呼叫ztree

<SCRIPT type="text/javascript">
        <!--
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                //點選事件，查詢節點詳細資訊
                onClick: zTreeOnClick
            }
        };

        function zTreeOnClick(event, treeId, treeNode) {
            alert(treeNode.id + ", " + treeNode.name);
        };


        var serverRetutnData = "[{'id':'1','pId':'0','name':'玄清'},{'id':'2','pId':'1', open:'true','name':'張三'},{'id':'3','pId':'2', open:'true','name':'李四'},{'id':'4','pId':'3', open:'true','name':'王五'},{'id':'5','pId':'4', open:'true','name':'張小明'},{'id':'6','pId':'1', open:'true','name':'趙六'}]";

        serverRetutnData = eval('('+serverRetutnData+')'); // eval js函式  將字串轉換為陣列 具體使用時請考慮瀏覽器相容性


        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo2"), setting, serverRetutnData);
        });
        //-->
    </SCRIPT>

html程式碼

<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo2" class="ztree"></ul>
    </div>

</div>

頁面顯示結果

點選效果