jQuery EasyUI Menú de árbol -Crear cuadrícula de árbol compleja

La cuadrícula de árbol (TreeGrid) puede mostrar hojas de cálculo con múltiples columnas y datos complejos en un espacio limitado. Este tutorial demostrará cómo organizar los datos de tabla en cuadrículas divididas y encabezados de varias filas para organizar datos comunes.

Crear cuadrícula de árbol (TreeGrid)

    <table title="Complex TreeGrid" class="easyui-treegrid" style="width:550px;height:250px"
            url="data/treegrid2_data.json"
            rownumbers="true" showFooter="true"
            idField="id" treeField="region">
        <thead frozen="true">
            <tr>
                <th field="region" width="150">Region</th>
            </tr>
        </thead>
        <thead>
            <tr>
                <th colspan="4">2009</th>
                <th colspan="4">2010</th>
            </tr>
            <tr>
                <th field="f1" width="50" align="right">1st qrt.</th>
                <th field="f2" width="50" align="right">2st qrt.</th>
                <th field="f3" width="50" align="right">3st qrt.</th>
                <th field="f4" width="50" align="right">4st qrt.</th>
                <th field="f5" width="50" align="right">1st qrt.</th>
                <th field="f6" width="50" align="right">2st qrt.</th>
                <th field="f7" width="50" align="right">3st qrt.</th>
                <th field="f8" width="50" align="right">4st qrt.</th>
            </tr>
        </thead>
    </table>

Como puede ver, el uso de la cuadrícula de árbol (Treegrid) es igual que el de la cuadrícula de datos (Datagrid). Utilice el atributo 'frozen' para definir columnas congeladas, y los atributos 'colspan' y 'rowspan' de las columnas para definir encabezados de varias filas.

Descargar ejemplos de jQuery EasyUI

jeasyui-tree-treegrid2.zip