Erlernen Sie ganz einfach das jQuery-Plug-in EasyUI EasyUI zum Erstellen eines Baumnetzwerks (1)_jquery

1. Erstellen Sie ein einfaches Baumraster mit EasyUI
Die TreeGrid-Komponente erbt vom DataGrid, ermöglicht jedoch Beziehungen zwischen übergeordneten und untergeordneten Knoten zwischen Zeilen. Viele Eigenschaften werden vom DataGrid geerbt und können im TreeGrid verwendet werden. Um ein Baumgitter (TreeGrid) verwenden zu können, muss der Benutzer das Attribut „treeField“ definieren, um anzugeben, welches Feld als Baumknoten fungiert.
In diesem Artikel erfahren Sie, wie Sie mit der TreeGrid-Komponente eine Ordnersuche einrichten.

Erstellen Sie ein Baumgitter (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. Erstellen Sie ein komplexes Baumraster mit EasyUI
TreeGrid kann Tabellenkalkulationen mit mehreren Spalten und komplexen Daten auf begrenztem Raum anzeigen. In diesem Tutorial wird gezeigt, wie Sie tabellarische Daten in einem geteilten Raster und mehrzeiligen Überschriften anordnen, um gemeinsame Daten zu organisieren.

Erstellen Sie ein Baumgitter (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>

Wie Sie sehen können, wird das Baumraster (Treegrid) genauso verwendet wie das Datenraster (Datagrid). Bitte verwenden Sie das Attribut „frozen“, um eingefrorene Spalten zu definieren, und die Attribute „colspan“ und „rowspan“ von Spalten, um mehrzeilige Überschriften zu definieren.

Die oben genannten Methoden zum Erstellen einfacher Baumnetzwerke und komplexer Baumnetzwerke werden von EasyUI hoffentlich für das Lernen aller hilfreich sein.

Wenn Sie mehr erfahren möchten, schauen Sie sich bitte diesen Artikel an: „Einfach zu erlernendes jQuery-Plug-in EasyUI EasyUI zur Implementierung grundlegender Operationen des Baumnetzwerks (2)“