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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.