easyUI ComboGrid

@author YHC

继承至 $.fn.combo.defaults 和 $.fn.datagrid.defaults.覆盖默认值 $.fn.combogrid.defaults.

combogrid 关联了一个可编辑的文本框和一个下拉datagrid panel,允许用户从里面快速查找和选择,combogrid 提供按键导航选择项.

相关依赖

• combo
• datagrid

使用示例

创建ComboGrid

1.根据标记创建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}      ]]  });  

自动完成函数功能

让我们添加一个高级的自动完成的函数功能到combogrid,下拉datagrid 根据用户的输入将显示适合的结果.

$('#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

$q = isset($_POST['q']) ? $_POST['q'] : '';  // 请求参数//查询数据库和返回json数据 $rs = mysql_query("select * from item where name like '$q%'");  echo json_encode(...);  

属性

属性继承至 combo 和 datagrid,以下是combogrid新增的属性.

NameTypeDescriptionDefaultloadMsgstring当datagrid加载远程的服务器端数据的时候显示的消息.nullidFieldstringid字段名称.nulltextFieldstring显示到文本框中的文本字段.nullmodestring当文本改变的时候定义如何加载datagrid数据.如果设置为'remote' combogrid  将从远程服务器加载数据.当设置为'remote'模式时候,任何用户输入的信息将发送作为http参数,参数名为'q'到服务器端检索新的数据.localfilterfunction(q, row)当'mode'设置为'local'的时候,定义如何选择本地数据.
 返回true代表选择该行.

示例代码:

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

 

事件

事件继承至 combo and datagrid.

方法

方法继承至 combo,以下是combogrid新增或重写的方法.

NameParameterDescriptionoptionsnone返回 options 对象.gridnone返回datagrid 对象.以下示例展示如何得到选择行:

var g = $('#cc').combogrid('grid');// 得到datagrid 对象var r = g.datagrid('getSelected');// 得到选择行alert(r.name);

setValuesvalues设置组件值数组.

示例代码:

$('#cc').combogrid('setValues', ['001','007']);

setValuevalue设置组件值.

示例代码:

$('#cc').combogrid('setValue', '002');

clearnone清空组件值.



   以上如果有错误信息,请指出,thanks!