easyui系列之表单三Combobox,Combotree（4）

1、EasyUI Combobox 组合框

扩展自 $.fn.combo.defaults。通过 $.fn.combobox.defaults 重写默认的 defaults。

组合框（combobox）显示一个可编辑的文本框和下拉列表，用户可以从下拉列表中选择一个或多个值。用户可以直接输入文本到列表的顶部，或者从列表中选择一个或多个现成的值。

用法

从带有预定义结构的 <select> 元素创建组合框（combobox）。

<select id="cc" class="easyui-combobox" name="dept" style="200px;">
<option value="aa">aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>

从 <input> 标记创建组合框（combobox）。

<input id="cc" class="easyui-combobox" name="dept"
data-options="valueField:'id',textField:'text',url:'get_data.php'">

使用 javascript 创建组合框（combobox）。

<input id="cc" name="dept" value="aa">
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});

创建两个依赖的组合框（combobox）。

<input id="cc1" class="easyui-combobox" data-options="
valueField: 'id',
textField: 'text',
url: 'get_data1.php',
onSelect: function(rec){
var url = 'get_data2.php?id='+rec.id;
$('#cc2').combobox('reload', url);
}">
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'">

json 数据格式的示例：

[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]

注意：当我们要设置某个下拉选项为默认项的时候，设置如下

 var frmSearch = $('#frmSearch');
        //合同审核状态
        frmSearch.find('#Status').first().combobox({
            valueField: 'CodeNO',
            textField: 'CodeName',
            panelHeight: 'auto',
            value:"20",
            data: [
             { CodeNO: '', CodeName: '--全部--'},
             { CodeNO: 10, CodeName: '已保存'},
             { CodeNO: 20, CodeName: '待审核'},
             { CodeNO: 30, CodeName: '审核通过'},
             { CodeNO: 31, CodeName: '审核不通过'},
             { CodeNO: 40, CodeName: '已到期'},
             { CodeNO: 41, CodeName: '已解约'},
             { CodeNO: 99, CodeName: '已作废'}
            ]
        });

属性

该属性扩展自组合（combo），下面是为组合框（combobox）添加的属性。

 

groupFormatter:function(group):返回要显示在分组项目上的分组文本

$('#cc').combobox({
    groupFormatter: function(group){
        return '<span style="color:red">' + group + '</span>';
    }
});

data:array:被加载的列表数据

<input class="easyui-combobox" data-options="
        valueField: 'label',
        textField: 'value',
        data: [{
            label: 'java',
            value: 'Java'
        },{
            label: 'perl',
            value: 'Perl'
        },{
            label: 'ruby',
            value: 'Ruby'
        }]" />

 filter：fuction:定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数：
q：用户输入的文本。
row：列表中的行数据。
返回 true 则允许显示该行。

$('#cc').combobox({
    filter: function(q, row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});

 formatter:function:定义如何呈现行。该函数有一个参数：row。

$('#cc').combobox({
    formatter: function(row){
        var opts = $(this).combobox('options');
        return row[opts.textField];
    }
});

事件

该事件扩展自组合（combo），下面是为组合框（combobox）添加的事件。

 

方法

该方法扩展自组合（combo），下面是为组合框（combobox）添加或重写的方法。

 

2、EasyUI Combotree 组合树

扩展自 $.fn.combo.defaults 和 $.fn.tree.defaults。通过 $.fn.combotree.defaults 重写默认的 defaults。

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

用法

从标记创建组合树（combotree）

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

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

<input id="cc" value="01">
$('#cc').combotree({
    url: 'get_data.php',
    required: true
});

属性

该属性扩展自组合（combo）和树（tree），下面是为组合树（combotree）添加或重写的属性。

事件

该事件扩展自组合（combo）和树（tree）

方法

该方法扩展自组合（combo），下面是为组合树（combotree）添加或重写的方法。

tree返回树（tree）对象。

var t = $('#cc').combotree('tree');    // get the tree object
var n = t.tree('getSelected');        // get selected node
alert(n.text);

loadData:data记住本地的树（tree）数据。

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