一、簡介：
　　combotree控制元件是對combo（自定義下拉框）與tree（樹）控制元件的擴充套件，它與combobox（下拉列表框）類似，但是它將下拉列表框的列表替換成了樹。該控制元件支援樹狀態的複選框從而實現多選。

二、用法
該控制元件有兩種建立的方式：通過標籤的方式建立以及通過javascript程式設計的方式建立，在下面的例子中著重以程式設計的方式實現。

html程式碼：

<input id="ProjectTree"  style="width: 300px;" />

1、本地資料來源的載入
通過繼承自tree的”data”屬性來實現：

$("#ProjectTree
 
").combotree({
                data: [{
                    text: 'Item1',
                    state: 'closed',
                    children: [{
                        text: 'Item11'
                    }, {
                        text: 'Item12'
                    }]
                }, {
                    text
 
: 'Item2'
                }]
            });

通過方法“loadData”實現：

html程式碼:

<input id="ProjectTree" class="easyui-combotree"  style="width: 300px;" />

js程式碼

$("#ProjectTree").combotree("loaddata", [{
                text: 'Item1',
                state: 'closed',
                children: [{
                    text
 
: 'Item11'
                }, {
                    text: 'Item12'
                }]
            }, {
                text: 'Item2'
            }]);

2、非同步載入資料

在介紹非同步載入資料之前，先講解一下資料來源的格式。其格式為json，每個節點都具備一下屬性：

id：節點ID，對載入遠端資料很重要。
text：顯示節點文字。
state：節點狀態，’open’ 或 ‘closed’，預設：’open’。如果為’closed’的時候，將不自動展開該節點。
checked：表示該節點是否被選中。
attributes: 被新增到節點的自定義屬性。
children: 一個節點陣列聲明瞭若干節點。

資料來源格式舉例：

[{   
    "id":1,   
    "text":"Folder1",   
    "iconCls":"icon-save",   
    "children":[{   
        "text":"File1",   
        "checked":true  
    },{   
        "text":"Books",   
        "state":"open",   
        "attributes":{   
            "url":"/demo/book/abc",   
            "price":100   
        },   
        "children":[{   
            "text":"PhotoShop",   
            "checked":true  
        },{   
            "id": 8,   
            "text":"Sub Bookds",   
            "state":"closed"  
        }]   
    }]   
},{   
    "text":"Languages",   
    "state":"closed",   
    "children":[{   
        "text":"Java"  
    },{   
        "text":"C#"  
    }]   
}] 

非同步載入資料舉例：

前端js程式碼：

//構造專案樹
           $("#ProjectTree").combotree({
               url: "Ajax.ashx",
               valueField: "id",
               textField: "text",
               lines: true,               
               queryParams: {
                   ParamType: "Init",
                   Action: "GetProjectTree",
                   M: Math.random()
               },
               onBeforeSelect: function (node) {
                  // debugger;
                   if (!$(this).tree('isLeaf', node.target)) {
                       $(this).combo("showPanel");
                       return false;
                   }                

               }

           });

實際使用：
建立一個實體類，有已下屬性:
id：節點ID，對載入遠端資料很重要。
text：顯示節點文字。
state：節點狀態，’open’ 或 ‘closed’，預設：’open’。如果為’closed’的時候，將不自動展開該節點。
checked：表示該節點是否被選中。
attributes: 被新增到節點的自定義屬性。
children: 一個節點陣列聲明瞭若干節點。
根據具體資料庫對比新增。
html程式碼:

<select class="easyui-combotree" style="width:200px;" name="pid"   
                data-options="url:'${pageContext.request.contextPath}/function/listAjaxForComboTree'"></select>