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

1、EasyUI Combobox 组合框

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

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

用法

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

1 <select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
2 <option value="aa">aitem1</option>
3 <option>bitem2</option>
4 <option>bitem3</option>
5 <option>ditem4</option>
6 <option>eitem5</option>
7 </select>

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

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

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

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

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

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

json 数据格式的示例：

 1 [{
 2 "id":1,
 3 "text":"text1"
 4 },{
 5 "id":2,
 6 "text":"text2"
 7 },{
 8 "id":3,
 9 "text":"text3",
10 "selected":true
11 },{
12 "id":4,
13 "text":"text4"
14 },{
15 "id":5,
16 "text":"text5"
17 }]

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

 1  var frmSearch = $('#frmSearch');
 2         //合同审核状态
 3         frmSearch.find('#Status').first().combobox({
 4             valueField: 'CodeNO',
 5             textField: 'CodeName',
 6             panelHeight: 'auto',
 7             value:"20",
 8             data: [
 9              { CodeNO: '', CodeName: '--全部--'},
10              { CodeNO: 10, CodeName: '已保存'},
11              { CodeNO: 20, CodeName: '待审核'},
12              { CodeNO: 30, CodeName: '审核通过'},
13              { CodeNO: 31, CodeName: '审核不通过'},
14              { CodeNO: 40, CodeName: '已到期'},
15              { CodeNO: 41, CodeName: '已解约'},
16              { CodeNO: 99, CodeName: '已作废'}
17             ]
18         });

属性

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

 

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

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

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

 1 <input class="easyui-combobox" data-options="
 2         valueField: 'label',
 3         textField: 'value',
 4         data: [{
 5             label: 'java',
 6             value: 'Java'
 7         },{
 8             label: 'perl',
 9             value: 'Perl'
10         },{
11             label: 'ruby',
12             value: 'Ruby'
13         }]" />

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

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

 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）

1 <select id="cc" class="easyui-combotree" style="width:200px;"
2     data-options="url:'get_data.php',required:true">
3 </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）对象。

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

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

 1 $('#cc').combotree('loadData', [{
 2     id: 1,
 3     text: 'Languages',
 4     children: [{
 5         id: 11,
 6         text: 'Java'
 7     },{
 8         id: 12,
 9         text: 'C++'
10     }]
11 }]);

转载于:https://www.cnblogs.com/MirZhai/p/11024935.html