Create a Complex TreeGrid

Create a Complex TreeGrid

Tutorial » Create a Complex TreeGrid

The TreeGrid can display spreadsheets with muliple columns and complex data on a limited space. This tutorial will demonstrate how table data can be arranged within a splitted grid and multi-row headers that allow you to organize data of any complicity.

View Demo

Build TreeGrid

1. <table title="Complex TreeGrid" class="easyui-treegrid" style="width:550px;height:250px"  
2.         url="data/treegrid2_data.json"  
3.         rownumbers="true" showFooter="true"  
4.         idField="id" treeField="region">  
5.     <thead frozen="true">  
6.         <tr>  
7.             <th field="region" width="150">Region</th>  
8.         </tr>  
9.     </thead>  
10.     <thead>  
11.         <tr>  
12.             <th colspan="4">2009</th>  
13.             <th colspan="4">2010</th>  
14.         </tr>  
15.         <tr>  
16.             <th field="f1" width="50" align="right">1st qrt.</th>  
17.             <th field="f2" width="50" align="right">2st qrt.</th>  
18.             <th field="f3" width="50" align="right">3st qrt.</th>  
19.             <th field="f4" width="50" align="right">4st qrt.</th>  
20.             <th field="f5" width="50" align="right">1st qrt.</th>  
21.             <th field="f6" width="50" align="right">2st qrt.</th>  
22.             <th field="f7" width="50" align="right">3st qrt.</th>  
23.             <th field="f8" width="50" align="right">4st qrt.</th>  
24.         </tr>  
25.     </thead>  
26. </table>  

As you can see, the usage of treegrid is same as datagrid. Use 'frozen' attribute to define the frozen columns, 'colspan' and 'rowspan' attributes of columns to define multi-columns headers.

Download the EasyUI example:

easyui-treegrid-demo.zip