Aplicaciones jQuery EasyUI -Crear una aplicación CRUD con formulario de edición de detalle de fila expandible

Al cambiar la vista del DataGrid a 'detailview', el usuario puede expandir una fila para mostrar algunos detalles de la fila debajo de ella. Esta función le permite proporcionar un diseño adecuado para el formulario de edición que se muestra en el panel de detalle de la fila. En este tutorial, usamos el componente DataGrid para reducir el espacio ocupado por el formulario de edición.

Paso 1: Definir el DataGrid en la etiqueta HTML

<table id="dg" title="My Users" style="width:550px;height:250px"
        url="get_users.php"
        toolbar="#toolbar"
        fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="firstname" width="50">First Name</th>
            <th field="lastname" width="50">Last Name</th>
            <th field="phone" width="50">Phone</th>
            <th field="email" width="50">Email</th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="../index.html" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">New</a>
    <a href="../index.html" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyItem()">Destroy</a>
</div>

Paso 2: Aplicar la vista de detalle al DataGrid

$('#dg').datagrid({
    view: detailview,
    detailFormatter:function(index,row){
        return '<div class="ddv"></div>';
    },
    onExpandRow: function(index,row){
        var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
        ddv.panel({
            border:false,
            cache:true,
            href:'show_form.php?index='+index,
            onLoad:function(){
                $('#dg').datagrid('fixDetailRowHeight',index);
                $('#dg').datagrid('selectRow',index);
                $('#dg').datagrid('getRowDetail',index).find('form').form('load',row);
            }
        });
        $('#dg').datagrid('fixDetailRowHeight',index);
    }
});

Para aplicar la vista de detalle al DataGrid, incluya el archivo 'datagrid-detailview.js' en la cabecera de la página HTML.

Usamos la función 'detailFormatter' para generar el contenido del detalle de la fila.

En este caso, devolvemos un <div> vacío para colocar el formulario de edición.

Cuando el usuario hace clic en el botón de expandir fila ('+'), se disparará el evento 'onExpandRow', y cargaremos el formulario de edición mediante ajax.

Llamamos al método 'getRowDetail' para obtener el contenedor del detalle de la fila, de modo que podamos localizar el panel de detalle de la fila.

Creamos un panel en el detalle de la fila y cargamos el formulario de edición devuelto desde 'show_form.php'.

Paso 3: Crear el formulario de edición

El formulario de edición se carga desde el servidor.

<form method="post">
    <table class="dv-table" style="width:100%;background:#FAFAFA;padding:5px;margin-top:5px;">
        <tr>
            <td>First Name</td>
            <td><input name="firstname" class="easyui-validatebox" required="true"></input></td>
            <td>Last Name</td>
            <td><input name="lastname" class="easyui-validatebox" required="true"></input></td>
        </tr>
        <tr>
            <td>Phone</td>
            <td><input name="phone"></input></td>
            <td>Email</td>
            <td><input name="email" class="easyui-validatebox" validType="email"></input></td>
        </tr>
    </table>
    <div style="padding:5px 0;text-align:right;padding-right:30px">
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem(<?php echo $_REQUEST['index'];?>)">Save</a>
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem(<?php echo $_REQUEST['index'];?>)">Cancel</a>
    </div>
</form>

Paso 4: Guardar o cancelar la edición

Llame a la función 'saveItem' para guardar un usuario o llame a la función 'cancelItem' para cancelar la edición.

function saveItem(index){
    var row = $('#dg').datagrid('getRows')[index];
    var url = row.isNewRecord ? 'save_user.php' : 'update_user.php?id='+row.id;
    $('#dg').datagrid('getRowDetail',index).find('form').form('submit',{
        url: url,
        onSubmit: function(){
            return $(this).form('validate');
        },
        success: function(data){
            data = eval('('+data+')');
            data.isNewRecord = false;
            $('#dg').datagrid('collapseRow',index);
            $('#dg').datagrid('updateRow',{
                index: index,
                row: data
            });
        }
    });
}

Determine a qué URL se debe enviar, luego busque el objeto del formulario y llame al método 'submit' para enviar los datos del formulario. Cuando los datos se guarden correctamente, contraiga y actualice los datos de la fila.

function cancelItem(index){
    var row = $('#dg').datagrid('getRows')[index];
    if (row.isNewRecord){
        $('#dg').datagrid('deleteRow',index);
    } else {
        $('#dg').datagrid('collapseRow',index);
    }
}

Al cancelar la edición, si la fila es nueva y aún no se ha guardado, elimine la fila directamente; de lo contrario, contraiga la fila.

Descargar ejemplos de jQuery EasyUI

jeasyui-app-crud3.zip