jQuery EasyUI Extensión -Cuadrícula de datos editable (Editable DataGrid)

jQuery EasyUI 扩展jQuery EasyUI Extensión

Uso

Crear una cuadrícula de datos (datagrid) en una etiqueta html

    <table id="tt" style="width:600px;height:200px"
            title="Editable DataGrid"
            singleSelect="true">
        <thead>
            <tr>
                <th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
                <th field="productid" width="100" editor="text">Product ID</th>
                <th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
                <th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
                <th field="attr1" width="150" editor="text">Attribute</th>
            </tr>
        </thead>
    </table>

Hacer que la cuadrícula de datos (datagrid) sea editable

$('#tt').edatagrid({
    url: 'datagrid_data.json',
    saveUrl: ...,
    updateUrl: ...,
    destroyUrl: ...
});

Ahora puede hacer doble clic en una fila de la cuadrícula de datos para comenzar la operación de edición. También puede configurar las propiedades saveUrl, updateUrl, destroyUrl para sincronizar automáticamente los datos entre el cliente y el servidor.

Propiedades

Estas propiedades extienden la cuadrícula de datos (datagrid). A continuación se muestran las propiedades añadidas para la cuadrícula de datos editable (edatagrid).

Nombre Tipo Descripción Valor predeterminado
destroyMsg object El mensaje del cuadro de diálogo de confirmación que se muestra al destruir una fila. 
destroyMsg:{
    norecord:{    // when no record is selected
        title:'Warning',
        msg:'No record is selected.'
    },
    confirm:{    // when select a row
        title:'Confirm',
        msg:'Are you sure you want to delete?'
    }
}
autoSave boolean Si se establece en true, guarda automáticamente la fila editada al hacer clic fuera de la cuadrícula de datos. false
url string Una URL para recuperar datos del servidor. null
saveUrl string Una URL para guardar datos en el servidor y devolver la fila añadida. null
updateUrl string Una URL para actualizar datos en el servidor y devolver la fila actualizada. null
destroyUrl string Una URL para enviar el parámetro 'id' al servidor para destruir la fila. null
tree selector Muestra el selector de árbol del componente de árbol correspondiente. null
treeUrl string Una URL para recuperar los datos del árbol. null
treeDndUrl string Una URL para manejar las operaciones de arrastrar y soltar. null
treeTextField string Define el nombre del campo de texto del árbol. name
treeParentField string Define el nombre del campo del nodo padre del árbol. parentId

Eventos

Estos eventos extienden la cuadrícula de datos (datagrid). A continuación se muestran los eventos añadidos para la cuadrícula de datos editable (edatagrid).

Nombre Parámetros Descripción
onAdd index,row Se activa cuando se añade una nueva fila.
onEdit index,row Se activa cuando se edita una fila.
onBeforeSave index Se activa antes de que una fila sea guardada. Devolver false cancela la acción de guardado.
onSave index,row Se activa cuando se guarda una fila.
onDestroy index,row Se activa cuando se destruye una fila.
onError index,row Se activa cuando ocurre un error del servidor.
El servidor debe devolver una fila con la propiedad 'isError' establecida en true para indicar que se produjo un error.

Ejemplo de código:

//server side code
echo json_encode(array(
    'isError' => true,
    'msg' => 'error message.'
));

//client side code
$('#dg').edatagrid({
    onError: function(index,row){
        alert(row.msg);
    }
});

Métodos

Estos métodos extienden la cuadrícula de datos (datagrid). A continuación se muestran los métodos añadidos o reescritos para la cuadrícula de datos editable (edatagrid).

Nombre Parámetros Descripción
options none Devuelve el objeto de opciones (options).
enableEditing none Habilita la edición de la cuadrícula de datos (datagrid).
disableEditing none Deshabilita la edición de la cuadrícula de datos (datagrid).
editRow index Edita la fila especificada.
addRow index Añade una nueva fila en el índice de fila especificado.
Si no se especifica el parámetro index, añade una nueva fila al final.

Ejemplo de código:

// append an empty row
$('#dg').edatagrid('addRow');

// append an empty row as first row
$('#dg').edatagrid('addRow',0);

// insert a row with default values
$('#dg').edatagrid('addRow',{
    index: 2,
    row:{
        name:'name1',
        addr:'addr1'
    }
});
saveRow none Guarda la fila editada y la publica en el servidor.
cancelRow none Cancela la edición de la fila.
destroyRow index Destruye la fila actualmente seleccionada.
Si no se especifica el parámetro index, destruye todas las filas seleccionadas.

Ejemplo de código:

// destroy all the selected rows
$('#dg').edatagrid('destroyRow');

// destroy the first row
$('#dg').edatagrid('destroyRow', 0);

// destroy the specified rows
$('#dg').edatagrid('destroyRow', [3,4,5]);

Descargar ejemplos de jQuery EasyUI

jquery-easyui-edatagrid.zip

jQuery EasyUI 扩展jQuery EasyUI Extensión Otras extensiones