Apprenez facilement le plug-in jQuery EasyUI EasyUI pour créer un réseau arborescent (1)_jquery

1. Créez une grille arborescente de base avec EasyUI
Le composant TreeGrid hérite du DataGrid mais autorise les relations nœud parent/enfant entre les lignes. De nombreuses propriétés sont héritées du DataGrid et peuvent être utilisées dans le TreeGrid. Afin d'utiliser une grille arborescente (TreeGrid), l'utilisateur doit définir l'attribut 'treeField' pour indiquer quel champ fait office de nœud d'arbre.
Cet article vous montrera comment configurer une navigation dans les dossiers à l'aide du composant TreeGrid.

Créer une grille arborescente (TreeGrid)

<table id="test" title="Folder Browser" class="easyui-treegrid" style="width:400px;height:300px"
 url="data/treegrid_data.json"
 rownumbers="true"
 idField="id" treeField="name">
 <thead>
 <tr>
 <th field="name" width="160">Name</th>
 <th field="size" width="60" align="right">Size</th>
 <th field="date" width="100">Modified Date</th>
 </tr>
 </thead>
</table>

2. Créez une grille arborescente complexe avec EasyUI
TreeGrid peut afficher des feuilles de calcul avec plusieurs colonnes et des données complexes dans un espace limité. Ce didacticiel montre comment organiser les données tabulaires dans une grille divisée et des en-têtes à plusieurs lignes pour organiser les données communes.

Créer une grille arborescente (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 constater, la grille arborescente (Treegrid) est utilisée de la même manière que la grille de données (Datagrid). Veuillez utiliser l'attribut « gelé » pour définir des colonnes gelées, ainsi que les attributs « colspan » et « rowspan » des colonnes pour définir des en-têtes à plusieurs lignes.

Ce qui précède sont les méthodes de création de réseaux d'arbres simples et de réseaux d'arbres complexes partagés par EasyUI. J'espère que cela sera utile à l'apprentissage de chacun.

Si vous souhaitez en savoir plus, veuillez consulter cet article : "Plug-in jQuery facile à apprendre EasyUI EasyUI pour implémenter les opérations de base du réseau arborescent (2)"