用的是easyui的combotree外掛

先貼效果

當返回的節點的state為open時說明他是有下級資料的，否則就是節點資料，
每次點選上級的時候，上級節點展開之前，他會根據上級的id取請求他的下級資料，如果有資料，展開後會把資料自動填充為他的下級即children:屬性，依次類推，

如果是靜態的我們就應該補上children:屬性

 ComboTree demo
http://www.jeasyui.com/demo/main/index.php?plugin=ComboTree&theme=material-teal&dir=ltr&pitem=&sort=asc

這個元件從$ .fn.combo.defaults和$ .fn.tree.defaults擴充套件。使用$ .fn.combotree.defaults覆蓋預設值。
可以載入以下格式的資料

loadData    data    Load the locale tree data.

Code example:

$('#cc').combotree('loadData',
 [{
    id: 1,
    text: 'Languages',
    children:
     [{
        id: 11,
        text: 'Java'
    },
    {
        id: 12,
        text: 'C++'
    }]
}]

);

它只有這一個方法有用
clear    none    Clear the component value.

主要看看它繼承的tree元件
http://www.jeasyui.com/demo/main/index.php?plugin=Tree&theme=material-teal&dir=ltr&pitem=&sort=asc
http://www.jeasyui.com/documentation/tree.php

它常用的方法有
options         none    Return the options of tree.
onBeforeExpand    node    Fires before node is expanded, return false to cancel this expand action.
其次注意的是（很重要）
許多事件回撥函式都可以採用'node'引數，該引數包含以下屬性：
id：標識值繫結到節點。
text：要顯示的文字。
iconCls：要顯示圖示的css類。
checked：是否檢查節點。
state：節點狀態，'open'或'closed'。
attributes：自定義屬性繫結到節點。
target：目標DOM物件。

id: An identity value bind to the node.
text: Text to be showed.
iconCls: The css class to display icon.
checked: Whether the node is checked.
state: The node state, 'open' or 'closed'.
attributes: Custom attributes bind to the node.
target: Target DOM object.

貼程式碼
前端

<input id="orgName" type="text" name="orgName" />

$(function () {
        $('#orgName').combotree({
            width:135,
            url: 'tmCommonController.do?findOrgList&parentId=402882e55f813b35015f816362c70003',//第一次應該先載入頂級的節點
            onBeforeExpand: function (node) {
                $(this).tree('options').url =
                    'tmCommonController.do?findOrgList&parentId='+node.id;
            }
        });
    });
}  

重置：  

$('#orgName').combotree('clear');

後臺

@RequestMapping(params = "findOrgList")
@ResponseBody
public List<TreeVo> findOrgList(String parentId){
    List<TreeVo> orgList = tmCommonService.findOrgList(parentId);
    return orgList;
}

sql用自連線

SELECT DISTINCT
    CASE  
      WHEN t1.IS_LEAF = 1 THEN  'open'
      ELSE 'closed'
    END AS STATE,
    t1.id AS id,
    t1.org_code AS orgcode,
    t1.org_name AS text,
    t2.id AS parentid,
    t2.org_name AS parentname
FROM
    tm_org t1
    LEFT JOIN tm_org t2 ON t1.parent_id = t2.id
WHERE
        1 = 1
    AND
        t.parent_id =?

vo

TreeGridVo  
public class TreeGridVo<T> {
    private String id;
    private String parentId;
    private String parentName;
    private String text;
    private String state = "closed";

}


TreeVo
public class TreeVo extends TreeGridVo<TreeVo> {
    private String orgId;
    private String orgName;
    private String orgCode;
    private String parentId;
}