jQuery EasyUI DataGrid -Expandir filas para mostrar detalles

El DataGrid (datagrid) puede cambiar su vista (view) para mostrar diferentes efectos. Con la vista de detalle, el DataGrid (datagrid) puede mostrar un botón de expansión ("+" o "-") a la izquierda de las filas de datos. El usuario puede expandir las filas para mostrar información detallada adicional.

Paso 1: Crear el DataGrid (DataGrid)

    <table id="dg" style="width:500px;height:250px"
            url="datagrid8_getdata.php"
            pagination="true" sortName="itemid" sortOrder="desc"
            title="DataGrid - Expand Row"
            singleSelect="true" fitColumns="true">
        <thead>
            <tr>
                <th field="itemid" width="60">Item ID</th>
                <th field="productid" width="80">Product ID</th>
                <th field="listprice" align="right" width="70">List Price</th>
                <th field="unitcost" align="right" width="70">Unit Cost</th>
                <th field="status" width="50" align="center">Status</th>
            </tr>
        </thead>
    </table>

Paso 2: Configurar la vista de detalle para el DataGrid (DataGrid)

Para usar la vista de detalle, recuerde referenciar el archivo de script de vista en el encabezado de la página.

<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script>

$('#dg').datagrid({
    view: detailview,
    detailFormatter:function(index,row){
        return '<div class="ddv" style="padding:5px 0"></div>';
    },
    onExpandRow: function(index,row){
        var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
        ddv.panel({
            border:false,
            cache:false,
            href:'datagrid21_getdetail.php?itemid='+row.itemid,
            onLoad:function(){
                $('#dg').datagrid('fixDetailRowHeight',index);
            }
        });
        $('#dg').datagrid('fixDetailRowHeight',index);
    }
});

Definimos la función 'detailFormatter', que le dice al DataGrid (datagrid) cómo renderizar la vista de detalle. En este caso, devolvemos un elemento simple '<div>', que actuará como contenedor del contenido detallado. Tenga en cuenta que la información detallada está vacía. Cuando el usuario hace clic en el botón de expansión ('+'), se activará el evento onExpandRow. Por lo tanto, podemos escribir algún código para cargar el contenido detallado mediante ajax. Finalmente, llamamos al método 'fixDetailRowHeight' para fijar la altura de la fila cuando se carga el contenido detallado.

Paso 3: Código del lado del servidor

datagrid21_getdetail.php
&lt;?php
    include_once 'conn.php';

    $itemid = mysql_real_escape_string($_REQUEST['itemid']);

    $rs = mysql_query("select * from item where itemid='$itemid'");
    $item = mysql_fetch_array($rs);
?&gt;

<table class="dv-table" border="0" style="width:100%;">
    <tr>
        <td rowspan="3" style="width:60px">
            &lt;?php
                $aa = explode('-',$itemid);
                $serno = $aa[1];
                $img = "images/shirt$serno.gif";
                echo "<img src=\"$img\" style=\"width:60px;margin-right:20px\" />";
            ?&gt;
        </td>
        <td class="dv-label">Item ID: </td>
        <td>&lt;?php echo $item['itemid'];?&gt;</td>
        <td class="dv-label">Product ID:</td>
        <td>&lt;?php echo $item['productid'];?&gt;</td>
    </tr>
    <tr>
        <td class="dv-label">List Price: </td>
        <td>&lt;?php echo $item['listprice'];?&gt;</td>
        <td class="dv-label">Unit Cost:</td>
        <td>&lt;?php echo $item['unitcost'];?&gt;</td>
    </tr>
    <tr>
        <td class="dv-label">Attribute: </td>
        <td colspan="3">&lt;?php echo $item['attr1'];?&gt;</td>
    </tr>
</table>

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid21.zip

Otras extensiones