jQuery EasyUI forma plugin - grade composta Combogrid
jQuery EasyUI plug-in Estende-se desde $ .fn.combo.defaults e US $ .fn.datagrid.defaults. Por $ .fn.combogrid.defaults substituir os padrões predefinidos.
grade composta (combogrid) para caixas de texto editável e suspensa Painel de grade de dados combinados, os usuários podem rapidamente encontrar e selecionar a partir do painel de grade de dados drop-down. grade composta (combogrid) oferece uma escolha de um projecto apoiado pela navegação pelo teclado.
depender
- combinação
- datagrid
uso
Criando grade composta (combogrid)
1, a partir de tags para criar grade composta (combogrid).
<Id = "cc" class = "easyui-combogrid" name = "departamento" style = "width: 250px;"
-opções de dados = "
panelWidth: 450,
value: '006',
IDField: 'código',
textField: 'nome',
url: 'datagrid_data.json',
colunas: [[
{Field: 'código', título: 'Code', largura: 60},
{Field: 'nome', título: 'Nome', width: 100},
{Field: 'endereço', título: 'Endereço', width: 120},
{Field: 'col4', título: 'Col41', width: 100}
]]
"> </ Select>
2, o uso de javascript criar elementos do <select> ou <input> existente.
<Id de entrada = "cc" name = value "departamento" = "01">
$ ( "# Cc '). Combogrid ({
panelWidth: 450,
value: '006',
IDField: 'código',
textField: 'nome',
url: 'datagrid_data.json',
colunas: [[
{Field: 'código', título: 'Code', largura: 60},
{Field: 'nome', título: 'Nome', width: 100},
{Field: 'endereço', título: 'Endereço', width: 120},
{Field: 'col4', título: 'Col41', width: 100}
]]
});
recurso AutoCompletar
Vamos grade composta (combogrid) mencionar que recurso AutoCompletar. grade de dados drop-down exibe possíveis resultados com base na entrada do usuário.
$ ( "# Cc '). Combogrid ({
delay: 500,
mode: «à distância»,
url: 'get_data.php',
IDField: 'id',
textField: 'nome',
colunas: [[
{Field: 'código', título: 'Code', largura: 120, classificável: true},
{Field: 'nome', título: 'Nome', largura: 400, classificável: true}
]]
});
No lado do servidor, o parâmetro 'q' deve primeiro ser recuperada. Os usuários podem consultar o banco de dados e, em seguida, retorna um resultado formato sql JSON para o navegador.
get_data.php:
$ Q = isset ($ _ POST [ 'q']) $ _ POST [ 'q']: ''; // o parâmetro de solicitação? // Banco de dados Query e retornar dados do resultado JSON $ Rs = mysql_query ( "SELECT * FROM artigo onde nome como '$ q%'"); json_encode echo (...);
propriedade
A propriedade estende-se a partir da combinação (combinação), e redes de dados (datagrid), abaixo é uma combinação de uma grade (combogrid) propriedade adicionada.
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| 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 |
evento
O evento expandido a partir de uma combinação (combo), e grades de dados (datagrid).
caminho
Os métodos estendem a partir de uma combinação (combinação), abaixo é uma combinação de uma grade (combogrid) adicionar ou substituir os métodos.
| 名称 | 参数 | 描述 |
|---|---|---|
| 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 plug-in