jQuery EasyUI form plugin - Combogrid composite grid
Extends from $ .fn.combo.defaults and $ .fn.datagrid.defaults. By $ .fn.combogrid.defaults override the default defaults.
Composite grid (combogrid) to editable text boxes and drop-down data grid panel combined, users can quickly find and select from the drop-down data grid panel. Composite grid (combogrid) offers a choice of a project supported by keyboard navigation.
rely
- combo
- datagrid
usage
Creating composite grid (combogrid)
1, from tags to create composite grid (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, the use of javascript create elements from the existing <select> or <input>.
<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} ]] });
AutoComplete feature
Let composite grid (combogrid) mention That AutoComplete feature. Drop-down data grid displays possible results based on user input.
$ ( '# 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} ]] });
On the server side, 'q' parameter must first be retrieved. Users can query the database, and then returns a JSON format sql result to the browser.
get_data.php:
$ 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 (...);
Attributes
The property extends from the combination (combo), and data grids (datagrid), below is a combination of a grid (combogrid) added property.
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
loadMsg | string | 当数据网格(datagrid)加载远程数据时显示的消息。 | null |
idField | string | id 的字段名。 | null |
textField | string | 显示在文本框中的 text 字段名。 | null |
mode | string | 定义当文本改变时如何加载数据网格(datagrid)数据。如果组合网格(combogrid)从服务器加载就设置为 '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; } }); |
100 |
event
The event expanded from a combination (combo), and data grids (datagrid).
method
The methods extend from a combination (combo), below is a combination of a grid (combogrid) add or override methods.
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项(options)对象。 |
grid | none | 返回数据网格(datagrid)对象。下面的实例显示如何取得选中的行:
var g = $('#cc').combogrid('grid'); // get datagrid object var r = g.datagrid('getSelected'); // get the selected row alert(r.name); |
setValues | values | 设置组件值的数组。 代码实例: $('#cc').combogrid('setValues', ['001','007']); |
setValue | value | 设置组件的值。 代码实例: $('#cc').combogrid('setValue', '002'); |
clear | none | 清除组件的值。 |
jQuery EasyUI plugin