easyui异步加载combotree

一、简介：
　　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代码:

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>

具体参考:https://www.cnblogs.com/YanYongSong/p/5103123.html