jQuery EasyUI Plugin de formulario -Combogrid Cuadrícula combinada

jQuery EasyUI 插件jQuery EasyUI Plugin

Se extiende a partir de $.fn.combo.defaults y $.fn.datagrid.defaults. Los defaults por defecto pueden sobrescribirse mediante $.fn.combogrid.defaults.

La cuadrícula combinada (combogrid) combina un cuadro de texto editable con un panel de cuadrícula de datos desplegable. El usuario puede buscar y seleccionar rápidamente desde el panel de cuadrícula de datos desplegable. La cuadrícula combinada (combogrid) proporciona soporte de navegación por teclado para seleccionar un elemento.

Dependencias

  • combo
  • datagrid

Uso

Crear una cuadrícula combinada (combogrid)

1. Crear una cuadrícula combinada (combogrid) desde el marcado.

<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. Crearla desde un elemento <select> o <input> existente usando 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}
    ]]
    });

Función de autocompletar

Agreguemos la función de autocompletar a la cuadrícula combinada (combogrid). La cuadrícula de datos desplegable mostrará los resultados posibles según la entrada del usuario.

$('#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}
    ]]
});

En el lado del servidor, el parámetro 'q' debe ser recuperado primero. El usuario puede consultar la base de datos y luego devolver un resultado SQL en formato JSON al navegador.

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(...);

Propiedades

Las propiedades se extienden desde combo y datagrid. A continuación se presentan las propiedades añadidas para la cuadrícula combinada (combogrid).

Nombre Tipo Descripción Valor por defecto
loadMsg string El mensaje que se muestra cuando la cuadrícula de datos (datagrid) carga datos remotos. null
idField string El nombre del campo para id. null
textField string El nombre del campo text que se muestra en el cuadro de texto. null
mode string Define cómo cargar los datos de la cuadrícula de datos (datagrid) cuando el texto cambia. Si la cuadrícula combinada (combogrid) carga desde el servidor, se establece como 'remote'. Cuando se establece en modo 'remote', el valor introducido por el usuario se enviará al servidor como un parámetro de solicitud HTTP llamado 'q' para obtener nuevos datos. local
filter function(q, row) Define cómo seleccionar datos locales cuando 'mode' está establecido en 'local'. Si devuelve true, se selecciona la fila.
Ejemplo de código:
$('#cc').combogrid({
    filter: function(q, row){
        var opts = $(this).combogrid('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});
100

Eventos

Los eventos se extienden desde combo y datagrid.

Métodos

Los métodos se extienden desde combo. A continuación se presentan los métodos añadidos o sobrescritos para la cuadrícula combinada (combogrid).

Nombre Parámetros Descripción
options none Devuelve el objeto de opciones (options).
grid none Devuelve el objeto de cuadrícula de datos (datagrid). El siguiente ejemplo muestra cómo obtener la fila seleccionada:
var g = $('#cc').combogrid('grid');    // get datagrid object
var r = g.datagrid('getSelected');    // get the selected row
alert(r.name);
setValues values Establece el array de valores del componente.
Ejemplo de código:
$('#cc').combogrid('setValues', ['001','007']);
setValue value Establece el valor del componente.
Ejemplo de código:
$('#cc').combogrid('setValue', '002');
clear none Limpia el valor del componente.
jQuery EasyUI 插件jQuery EasyUI Plugin Otras extensiones