combotree（组合树）的使用

一、前言： 

　　组合树（combotree）把选择控件和下拉树结合起来。它与组合框（combobox）相似，不同的是把列表替换成树组件。组合树（combotree）支持带有用于多选的树状态复选框的树。

二、使用实例

1、创建方式

　　easyui 中的控件一般有两种创建方式：通过标签的方式以及js编程的方式。

1.1 标签的方式创建：

<select id="cc" class="easyui-combotree" style="width:200px;"
    data-options="url:'get_data.php',required:true">
</select>

1.2 使用 javascript 创建组合树（combotree）

1.2.1 本地数据源的加载

通过继承自tree的"data"属性来实现：

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

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

效果图：

通过方法“loadData”实现：

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

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

1.2.2 异步加载数据：

在介绍异步加载数据之前，先讲解一下数据源的格式。其格式为json，每个节点都具备一下属性：

• id：节点ID，对加载远程数据很重要。
• text：显示节点文本。
• state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
• checked：表示该节点是否被选中。
<