Easily learn the jQuery plug-in EasyUI EasyUI to create a tree network (1)_jquery

1. Create a basic tree grid with EasyUI
The TreeGrid component inherits from the DataGrid but allows parent/child node relationships between rows. Many properties are inherited from the DataGrid and can be used in the TreeGrid. In order to use a tree grid (TreeGrid), the user must define the 'treeField' attribute to indicate which field acts as a tree node.
This article will show you how to set up a folder browsing using the TreeGrid component.

Create a tree grid (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. Create complex tree grid with EasyUI
TreeGrid can display spreadsheets with multiple columns and complex data in limited space. This tutorial demonstrates how to arrange tabular data in a split grid and multi-row headers to organize common data.

Create a tree grid (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>

As you can see, the tree grid (Treegrid) is used the same as the data grid (Datagrid). Please use the 'frozen' attribute to define frozen columns, and the 'colspan' and 'rowspan' attributes of columns to define multi-row headers.

The above are the methods of creating simple tree networks and complex tree networks shared by EasyUI. I hope it will be helpful to everyone's learning.

If you want to learn more, please check out this article: "Easy to learn jQuery plug-in EasyUI EasyUI to implement basic operations of tree network (2)"