jQuery plugin de forma EasyUI - rejilla compuesta Combogrid
plugin de jQuery EasyUI Se extiende desde $ .fn.combo.defaults y $ .fn.datagrid.defaults. Por $ .fn.combogrid.defaults anulan los valores predeterminados por defecto.
rejilla compuesta (combogrid) para cuadros de texto editables y desplegable panel de cuadrícula de datos combinada, los usuarios pueden encontrar y seleccionar rápidamente desde el panel de cuadrícula de datos desplegable. rejilla compuesta (combogrid) ofrece una selección de un proyecto apoyado por la navegación por teclado.
confiar
- combo
- datagrid
uso
Creación de rejilla compuesta (combogrid)
1, a partir de etiquetas para crear la rejilla compuesta (combogrid).
<Select id = clase "cc" = "easyui-combogrid" name = estilo "departamento" = "width: 250px;"
datos-options = "
panelWidth: 450,
valor: '006',
campo ID: «código»,
textField: 'nombre',
url: 'datagrid_data.json',
columnas: [[
{Campo: "código", título: 'Código', ancho: 60},
El campo {: 'nombre', título: 'Nombre', ancho: 100},
El campo {: 'dir', título: "Dirección", anchura: 120},
El campo {: 'col4', título: 'Col41, anchura: 100}
]]
"> </ Select>
2, el uso de Javascript a crear elementos de la existente <select> o <input>.
<Entrada de id = name = "dept" "cc" = "01">
$ ( '# Cc'). Combogrid ({
panelWidth: 450,
valor: '006',
campo ID: «código»,
textField: 'nombre',
url: 'datagrid_data.json',
columnas: [[
{Campo: "código", título: 'Código', ancho: 60},
El campo {: 'nombre', título: 'Nombre', ancho: 100},
El campo {: 'dir', título: "Dirección", anchura: 120},
El campo {: 'col4', título: 'Col41, anchura: 100}
]]
});
característica Autocompletar
Deje rejilla compuesta (combogrid) mencionan que la característica Autocompletar. cuadrícula de datos desplegable muestra los posibles resultados en función de la entrada del usuario.
$ ( '# Cc'). Combogrid ({
retraso: 500,
Modo: 'a distancia',
url: 'get_data.php',
campo ID: 'id',
textField: 'nombre',
columnas: [[
{Campo: "código", título: 'Código', anchura: 120, se puede ordenar: true},
El campo {: 'nombre', título: 'Nombre', anchura: 400, se puede ordenar: true}
]]
});
En el lado del servidor, el parámetro 'q' primero debe ser recuperada. Los usuarios pueden consultar la base de datos y, a continuación, devuelve un resultado formato JSON sql al navegador.
get_data.php:
$ Q = isset ($ _POST [ 'q']) $ _POST [ 'q']: ''; // el parámetro de la petición? // Base de datos de consulta y devolver los datos del resultado JSON $ Rs = mysql_query ( "SELECT * FROM elemento en el nombre como '$ q%'"); json_encode eco (...);
propiedad
La propiedad se extiende desde la combinación (combo), y las redes de datos (DataGrid), a continuación es una combinación de una rejilla (combogrid) añadido propiedad.
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| 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
El evento expandido de una combinación (combo), y tablas de datos (cuadrícula de datos).
camino
Los métodos se extienden a partir de una combinación (combinado), a continuación es una combinación de una rejilla (combogrid) añadir o sustituir 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 | 清除组件的值。 |
plugin de jQuery EasyUI