Plugin de formulario jQuery EasyUI -Combobox (cuadro combinado)

jQuery EasyUI 插件Plugin jQuery EasyUI

Extendido desde $.fn.combo.defaults. Los defaults predeterminados se pueden sobrescribir mediante $.fn.combobox.defaults.

El cuadro combinado (combobox) muestra un cuadro de texto editable y una lista desplegable, de la cual el usuario puede seleccionar uno o más valores. El usuario puede ingresar texto directamente en la parte superior de la lista, o seleccionar uno o más valores existentes de la lista.

Dependencias

  • combo

Uso

Crear un combobox (cuadro combinado) a partir de un elemento <select> con una estructura predefinida.

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>

Crear un combobox (cuadro combinado) a partir de una etiqueta <input>.

<input id="cc" class="easyui-combobox" name="dept"
    data-options="valueField:'id',textField:'text',url:'get_data.php'">

Crear un combobox (cuadro combinado) usando JavaScript.

<input id="cc" name="dept" value="aa">

$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});

Crear dos combobox (cuadros combinados) dependientes.

<input id="cc1" class="easyui-combobox" data-options="
    valueField: 'id',
    textField: 'text',
    url: 'get_data1.php',
    onSelect: function(rec){
    var url = 'get_data2.php?id='+rec.id;
    $('#cc2').combobox('reload', url);
    }">
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'">

Ejemplo del formato de datos JSON:

[{
    "id":1,
    "text":"text1"
},{
    "id":2,
    "text":"text2"
},{
    "id":3,
    "text":"text3",
    "selected":true
},{
    "id":4,
    "text":"text4"
},{
    "id":5,
    "text":"text5"
}]

Propiedades

Estas propiedades se extienden desde combo, a continuación se muestran las propiedades agregadas para combobox.

Nombre Tipo Descripción Valor predeterminado
valueField string El nombre de los datos subyacentes vinculados al valor (value) del ComboBox. value
textField string El nombre de los datos subyacentes vinculados al texto (text) del ComboBox. text
groupField string Indica el campo por el que se agrupará. Esta propiedad está disponible desde la versión 1.3.4. null
groupFormatter function(group) Devuelve el texto de grupo que se muestra en los elementos agrupados. Esta propiedad está disponible desde la versión 1.3.4.
Ejemplo de código:
$('#cc').combobox({
    groupFormatter: function(group){
        return '<span style="color:red">' + group + '</span>';
    }
});
mode string Define cómo cargar los datos de la lista cuando el texto cambia. Si el combobox carga desde el servidor, se establece como 'remote'. Cuando se establece el modo 'remote', el valor ingresado por el usuario se enviará al servidor como un parámetro de solicitud HTTP llamado 'q' para obtener nuevos datos. local
url string La URL para cargar los datos de la lista desde remoto. null
method string El método HTTP utilizado para recuperar los datos. post
data array Los datos de la lista que se cargan.
Ejemplo de código:
<input class="easyui-combobox" data-options="
        valueField: 'label',
        textField: 'value',
        data: [{
            label: 'java',
            value: 'Java'
        },{
            label: 'perl',
            value: 'Perl'
        },{
            label: 'ruby',
            value: 'Ruby'
        }]" />
null
filter function Define cómo filtrar los datos locales cuando 'mode' está establecido en 'local'. Esta función tiene dos parámetros:
q: el texto ingresado por el usuario.
row: los datos de la fila en la lista.
Devuelve true para permitir que la fila se muestre.

Ejemplo de código:
$('#cc').combobox({
    filter: function(q, row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});
formatter function Define cómo se representa la fila. Esta función tiene un parámetro: row.
Ejemplo de código:
$('#cc').combobox({
    formatter: function(row){
        var opts = $(this).combobox('options');
        return row[opts.textField];
    }
});
loader function(param,success,error) Define cómo cargar datos desde un servidor remoto. Devuelve false para cancelar la acción. Esta función tiene los siguientes parámetros:
param: el objeto de parámetros que se enviará al servidor remoto.
success(data): la función de devolución de llamada que se invocará cuando los datos se obtengan correctamente.
error(): la función de devolución de llamada que se invocará cuando falle la obtención de datos.
 json loader
loadFilter function(data) Devuelve los datos filtrados que se mostrarán. Esta propiedad está disponible desde la versión 1.3.3.

Eventos

Estos eventos se extienden desde combo, a continuación se muestran los eventos agregados para combobox.

Nombre Parámetros Descripción
onBeforeLoad param Se dispara antes de solicitar la carga de datos. Devuelve false para cancelar la acción de carga.
Ejemplo de código:
// change the http request parameters before load data from server
$('#cc').combobox({
    onBeforeLoad: function(param){
        param.id = 2;
        param.language = 'js';
    }
});
onLoadSuccess none Se dispara cuando los datos remotos se cargan correctamente.
onLoadError none Se dispara cuando falla la carga de datos remotos.
onSelect record Se dispara cuando el usuario selecciona un elemento de la lista.
onUnselect record Se dispara cuando el usuario deselecciona un elemento de la lista.

Métodos

Estos métodos se extienden desde combo, a continuación se muestran los métodos agregados o sobrescritos para combobox.

Nombre Parámetros Descripción
options none Devuelve el objeto de opciones (options).
getData none Devuelve los datos cargados.
loadData data Carga datos de lista locales.
reload url Solicita datos de lista remotos. Pase el parámetro 'url' para sobrescribir el valor de URL original.
Ejemplo de código:
$('#cc').combobox('reload');  // reload list data using old URL
$('#cc').combobox('reload','get_data.php');  // reload list data using new URL
setValues values Establece el array de valores del combobox.
Ejemplo de código:
$('#cc').combobox('setValues', ['001','002']);
setValue value Establece el valor del combobox.
Ejemplo de código:
$('#cc').combobox('setValue', '001');
clear none Limpia el valor del combobox.
select value Selecciona la opción especificada.
unselect value Deselecciona la opción especificada.
jQuery EasyUI 插件Plugin jQuery EasyUI Otras extensiones