### 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;"
1. data-options="
1. panelWidth:450,
1. value:'006',
1. idField:'code',
1. textField:'name',
1. url:'datagrid_data.json',
1. columns:[[
1. {field:'code',title:'Code',width:60},
1. {field:'name',title:'Name',width:100},
1. {field:'addr',title:'Address',width:120},
1. {field:'col4',title:'Col41',width:100}
1. ]]
1. "**></select>**
<select id="cc" class="easyui-combogrid" name="dept" style="width:250px;" data-options=" panelWidth:450, value:'006', idField:'code', textField:'name', url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:60}, {field:'name',title:'Name',width:100}, {field:'addr',title:'Address',width:120}, {field:'col4',title:'Col41',width:100} ]] "></select>
2. 使用Javascript通过已经定义的<select>或<input>标签来创建数据表格下拉框。
1. **<input** id="cc" name="dept" value="01" **/>**
<input id="cc" name="dept" value="01" />
1. $('#cc').combogrid({
1. panelWidth:450,
1. value:'006',
1.
1. idField:'code',
1. textField:'name',
1. url:'datagrid_data.json',
1. columns:[[
1. {field:'code',title:'Code',width:60},
1. {field:'name',title:'Name',width:100},
1. {field:'addr',title:'Address',width:120},
1. {field:'col4',title:'Col41',width:100}
1. ]]
1. });
$('#cc').combogrid({ panelWidth:450, value:'006', idField:'code', textField:'name', url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:60}, {field:'name',title:'Name',width:100}, {field:'addr',title:'Address',width:120}, {field:'col4',title:'Col41',width:100} ]] });
##### 自动完成功能
让我们为数据表格下拉框控件添加高级的自动完成功能。下拉数据表格会根据用户输入显示适合的结果。
1. $('#cc').combogrid({
1. delay: 500,
1. mode: 'remote',
1. url: 'get_data.php',
1. idField: 'id',
1. textField: 'name',
1. columns: [[
1. {field:'code',title:'Code',width:120,sortable:true},
1. {field:'name',title:'Name',width:400,sortable:true}
1. ]]
1. });
$('#cc').combogrid({ delay: 500, mode: 'remote', url: 'get_data.php', idField: 'id', textField: 'name', columns: [[ {field:'code',title:'Code',width:120,sortable:true}, {field:'name',title:'Name',width:400,sortable:true} ]]});
在服务器端，参数'q'必须先检索。用户可以查询数据库，然后返回一个SQL查询结果的JSON格式给浏览器。
get_data.php:
1. $q = isset($_POST['q']) ? $_POST['q'] : ''; // the request parameter
1. // query database and return JSON result data
1. $rs = mysql_query("select * from item where name like '$q%'");
1. echo json_encode(...);
$q = isset($_POST['q']) ? $_POST['q'] : ''; // the request parameter// query database and return JSON result data$rs = mysql_query("select * from item where name like '$q%'");echo json_encode(...);
####
#### 属性
数据表格下拉框的属性扩展自[combo](#)(自定义下拉框)和[datagrid](#)(数据表格)，树形下拉框新增属性如下：
<table class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>loadMsg</td> <td>string</td> <td>在数据表格加载远程数据的时候显示消息。</td> <td>null</td></tr><tr><td>idField</td> <td>string</td> <td>ID字段名称。</td> <td>null</td></tr><tr><td>textField</td> <td>string</td> <td><span id="result_box" lang="zh-CN" class="short_text" a="undefined" c="4" closure_uid_685577293="114"><span closure_uid_685577293="180">要显示</span><span closure_uid_685577293="181">在文本框中</span><span closure_uid_685577293="182">的文本字段</span><span closure_uid_685577293="183">。</span></span></td> <td>null</td></tr><tr><td>mode</td> <td>string</td> <td>定义在文本改变的时候如何读取数据网格数据。设置为'remote'，数据表格将从远程服务器加载数据。当设置为'remote'模式的时候，用户输入将会发送到名为'q'的http请求参数，向服务器检索新的数据。</td> <td>local</td></tr><tr><td>filter</td> <td>function(q, row)</td> <td>定义在'mode'设置为'local'的时候如何选择本地数据，返回true时则选择该行。 <p>代码示例：</p><pre>$('#cc').combogrid({
filter: function(q, row){
var opts = $(this).combogrid('options');
return row[opts.textField].indexOf(q) == 0;
}
});
</pre></td> <td/></tr></tbody></table>
####
#### 事件
数据表格下拉框事件完全扩展自[combo](#)(自定义下拉框)和[datagrid](#)(数据表格)。
####
#### 方法
数据表格下拉框的方法扩展自[combo](#)(自定义下拉框)，数据表格下拉框新增或重写的方法如下：
<table class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>方法参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回属性对象。</td></tr><tr><td>grid</td> <td>none</td> <td>返回数据表格对象。下面的例子显示了如何获取选择的行： <pre>var g = $('#cc').combogrid('grid'); // 获取数据表格对象
var r = g.datagrid('getSelected'); // 获取选择的行
alert(r.name);
</pre></td></tr><tr><td>setValues</td> <td>values</td> <td>设置组件值数组。 <p>代码示例：</p><pre>$('#cc').combogrid('setValues', ['001','007']);
</pre></td></tr><tr><td>setValue</td> <td>value</td> <td>设置组件值。 <p>代码示例：</p><pre>$('#cc').combogrid('setValue', '002');
</pre></td></tr><tr><td>clear</td> <td>none</td> <td>清除组件的值。</td></tr></tbody></table>
- jQuery EasyUI 1.4 版 API 中文版 (Made By Richie696)
- 文档说明
- 汉化说明
- EasyUI更新说明
- Base(基础)
- parser(解析器)
- easyloader(简单加载)
- draggable(拖动)
- droppable(放置)
- resizable(调整大小)
- pagination(分页)
- searchbox(搜索框)
- progressbar(进度条)
- tooltip(提示框)
- Layout(布局)
- panel(面板)
- tabs(选项卡)
- accordion(分类)
- layout(布局)
- Menu and Button(菜单和按钮)
- menu(菜单)
- linkbutton(按钮)
- menubutton(菜单按钮)
- splitbutton(分割按钮)
- Form(表单)
- form(表单)
- validatebox(验证框)
- textbox(文本框)
- combo(自定义下拉框)
- combobox(下拉列表框)
- combotree(树形下拉框)
- combogrid(数据表格下拉框)
- numberbox(数值输入框)
- datebox(日期输入框)
- datetimebox(日期时间输入框)
- datetimespinner(日期时间微调框)
- calendar(日历)
- spinner(微调)
- numberspinner(数字微调)
- timespinner(时间微调)
- slider(滑动条)
- filebox(文件框)
- Window(窗口)
- window(窗口)
- dialog(对话框窗口)
- messager(消息窗口)
- DataGrid and Tree(表格和树)
- datagrid(数据表格)
- propertygrid(属性表格)
- tree(树)
- treegrid(树形表格)
- Extension(扩展)
- Portal(门户)
- DataGrid View(数据表格展示)
- Editable DataGrid(可编辑表格)
- Editable Tree(可编辑树)
- DataGrid Filter Row(可过滤行的数据表格)
- Drag and Drop Rows in DataGrid(可拖放行的数据表格)
- Drag and Drop Rows in TreeGrid(可拖放行的树形表格)
- DWR Loader(DWR装载器)
- RTL Support(RTL支持)
- Ribbon(Ribbon界面)