jQuery EasyUI Tree Menu -Création d'une grille arborescente complexe

Le TreeGrid peut afficher des feuilles de calcul avec plusieurs colonnes et des données complexes dans un espace limité. Ce tutoriel montrera comment disposer les données de table en grilles fractionnées et en en-têtes sur plusieurs lignes afin d'organiser des données communes.

Création d'un 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>

Comme vous pouvez le voir, le TreeGrid est utilisé de la même manière que le Datagrid. Utilisez l'attribut 'frozen' pour définir les colonnes figées, et les attributs 'colspan' et 'rowspan' des colonnes pour définir des en-têtes sur plusieurs lignes.

Télécharger les exemples jQuery EasyUI

jeasyui-tree-treegrid2.zip