Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 15:28:43
Original
1586 people have browsed it

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>
Copy after login

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>
Copy after login

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)"

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!