Create a Complex TreeGrid

最新推荐文章于 2024-08-10 08:07:24 发布

转载最新推荐文章于 2024-08-10 08:07:24 发布 · 536 阅读

文章标签：

#attributes #table #2010

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

 
  
 <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 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.