@author YHC
继承至 $.fn.combo.defaults 和 $.fn.datagrid.defaults.覆盖默认值 $.fn.combogrid.defaults.
combogrid 关联了一个可编辑的文本框和一个下拉datagrid panel,允许用户从里面快速查找和选择,combogrid 提供按键导航选择项.
<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.combogrid 可以从已经存在的<select> or <input> 元素通过javascript创建
<input id="cc" name="dept" value="01" />
$('#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} ]] });
$('#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的格式发送给客户端.
$q = isset($_POST['q']) ? $_POST['q'] : ''; // 请求参数 //查询数据库和返回json数据 $rs = mysql_query("select * from item where name like '$q%'"); echo json_encode(...);
属性继承至 combo 和 datagrid,以下是combogrid新增的属性.
Name | Type | Description | Default |
---|---|---|---|
loadMsg | string | 当datagrid加载远程的服务器端数据的时候显示的消息. | null |
idField | string | id字段名称. | null |
textField | string | 显示到文本框中的文本字段. | null |
mode | string | 当文本改变的时候定义如何加载datagrid数据.如果设置为'remote' combogrid 将从远程服务器加载数据.当设置为'remote'模式时候,任何用户输入的信息将发送作为http参数,参数名为'q'到服务器端检索新的数据. | 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,以下是combogrid新增或重写的方法.
Name | Parameter | Description |
---|---|---|
options | none | 返回 options 对象. |
grid | none | 返回datagrid 对象.以下示例展示如何得到选择行: var g = $('#cc').combogrid('grid'); // 得到datagrid 对象 var r = g.datagrid('getSelected'); // 得到选择行 alert(r.name); |
setValues | values | 设置组件值数组. 示例代码: $('#cc').combogrid('setValues', ['001','007']); |
setValue | value | 设置组件值. 示例代码: $('#cc').combogrid('setValue', '002'); |
clear | none | 清空组件值. |