### ComboGrid（数据表格下拉框）

扩展自$.fn.combo.defaults和$.fn.datagrid.defaults。使用$.fn.combogrid.defaults重写默认值对象。

数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件，该控件允许用户快速查找和选择，并且该控件提供了键盘导航支持，对行进行筛选。

####

#### 依赖关系

- combo
- datagrid

####

#### 使用案例

##### 创建数据表格下拉框

1. 使用标签创建一个数据表格下拉框。

1. <select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"
2. data-options="
3. panelWidth:450,
4. value:'006',
5. idField:'code',
6. textField:'name',
7. url:'datagrid_data.json',
8. columns:[[
9. {field:'code',title:'Code',width:60},
10. {field:'name',title:'Name',width:100},
11. {field:'addr',title:'Address',width:120},
12. {field:'col4',title:'Col41',width:100}
13. ]]
14. "></select>

2. 使用Javascript通过已经定义的<select>或<input>标签来创建数据表格下拉框。

1. <input id="cc" name="dept" value="01" />

1. $('#cc').combogrid({
2. panelWidth:450,
3. value:'006',
5. idField:'code',
6. textField:'name',
7. url:'datagrid_data.json',
8. columns:[[
9. {field:'code',title:'Code',width:60},
10. {field:'name',title:'Name',width:100},
11. {field:'addr',title:'Address',width:120},
12. {field:'col4',title:'Col41',width:100}
13. ]]
14. });

##### 自动完成功能

让我们为数据表格下拉框控件添加高级的自动完成功能。下拉数据表格会根据用户输入显示适合的结果。

1. $('#cc').combogrid({
2. delay: 500,
3. mode: 'remote',
4. url: 'get_data.php',
5. idField: 'id',
6. textField: 'name',
7. columns: [[
8. {field:'code',title:'Code',width:120,sortable:true},
9. {field:'name',title:'Name',width:400,sortable:true}
10. ]]
11. });

在服务器端，参数'q'必须先检索。用户可以查询数据库，然后返回一个 SQL查询结果的 JSON 格式给浏览器。

get_data.php:

1. $q = isset($_POST['q']) ? $_POST['q'] : ''; // the request parameter
2. // query database and return JSON result data
3. $rs = mysql_query("select * from item where name like '$q%'");
4. echo json_encode(...);

#### 属性

数据表格下拉框的属性扩展自combo(自定义下拉框)和datagrid(数据表格)，树形下拉框新增属性如下：

属性名 | 属性值类型 | 描述 | 默认值
--- | --- | --- | ---
loadMsg | string | 在数据表格加载远程数据的时候显示消息。 | null
idField | string | ID字段名称。 | null
textField | string | 要显示在文本框中的文本字段。 | null
mode | string | 定义在文本改变的时候如何读取数据网格数据。设置为'remote'，数据表格将从远程服务器加载数据。当设置为'remote'模式的时候，用户输入将会发送到名为'q'的http请求参数，向服务器检索新的数据。 | local
filter | function(q, row) | 定义在'mode'设置为'local'的时候如何选择本地数据，返回true时则选择该行。 代码示例：
    $('#cc').combogrid({
    	filter: function(q, row){
    		var opts = $(this).combogrid('options');
    		return row[opts.textField].indexOf(q) == 0;
    	}
    });

####

#### 事件

数据表格下拉框事件完全扩展自combo(自定义下拉框)和datagrid(数据表格)。

####

#### 方法

数据表格下拉框的方法扩展自combo(自定义下拉框)，数据表格下拉框新增或重写的方法如下：

方法名 | 方法参数 | 描述
--- | --- | ---
options | none | 返回属性对象。
grid | none | 返回数据表格对象。下面的例子显示了如何获取选择的行：
    var g = $('#cc').combogrid('grid');	// 获取数据表格对象
    var r = g.datagrid('getSelected');	// 获取选择的行
    alert(r.name);
setValues | values | 设置组件值数组。 代码示例：
    $('#cc').combogrid('setValues', ['001','007']);
    $('#cc').combogrid('setValues', ['001','007',{id:'008',name:'name008'}]);
setValue | value | 设置组件值。 代码示例：
    $('#cc').combogrid('setValue', '002');
    $('#cc').combogrid('setValue', {id:'003',name:'name003'});
clear | none | 清除组件的值。