Easy Learning jquery Plugin Easyui easyui Create a Tree network (1) _jquery

First, Easyui create the basic tree grid
The tree grid (Treegrid) component inherits from the data grid (DataGrid), but allows parent/child node relationships between rows. Many properties inherit to the data grid (DataGrid) and can be used in a tree grid (Treegrid). In order to use the tree grid (Treegrid), the user must define the ' Treefield ' attribute to indicate which field is the tree node.
This article shows you how to set up a folder browse using the tree grid (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= "a" align= "right" > size</th>
 <th field= "date" width= ">modified date</th> </tr> </thead
 >
</table>

Second, Easyui create a complex tree grid
a tree grid (Treegrid) can show a spreadsheet with multiple columns and complex data on a finite space. This tutorial shows you how to arrange tabular data in split grids and multiple-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= "I" >Region</th> </tr> </thead> <thead> <tr> < Th colspan= "4" >2009</th> <th colspan= "4" >2010</th> </tr> <tr> <th field= "F1" width = "align=" "right" >1st qrt.</th> <th field= "F2" width= "the" align= "right" >2st qrt.</th> <th, fie Ld= "F3" Width= "align=" right ">3st qrt.</th> <th field=" F4 "width=" "align=" right ">4st
 Gt <th field= "f5" width= "align=" right ">1st qrt.</th> <th field=" f6 "width=" "align=" right ">2st .</th> <th field= "F7" width= "align=" "right" >3st qrt.</th> "<th" field= "F8" width= "align=" righ T ">4st qrt.</th> </tr&Gt </thead> </table>

As you can see, the use of the tree grid (Treegrid) is the same as the data grid (Datagrid). Use the ' Frozen ' property to define a frozen column, and the ' colspan ' and ' rowspan ' properties of the column to define a multiline header.

The above is for everyone to share the Easyui to create a simple tree-shaped network and complex tree-shaped network method, I hope to help you learn.

To learn more, check out this article: Easy learning jquery plugin Easyui Easyui implementation of tree Network basic operation (2)