combogrid - Documentation - jQuery EasyUI

组合表格 - ComboGrid

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

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

.

Dependencies

  • combo
  • datagrid

使用方法(Usage Example)

Create ComboGrid

1..根据标记创建combogrid.

2. combogrid 可以从已经存在的<select> or <input> 元素通过javascript创建.


Autocomplete Functionality

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

在服务器端,'q'参数必须先检索,用户可以查询数据库然后返回一个sql的结果以json的格式发送给客户端.

get_data.php:


Properties

属性继承至 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;
	}
});

Events

事件继承至 combo and datagrid.

Methods

方法继承至 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 清空组件值.