Create a Complex TreeGrid

来源：互联网发布：奥运会没人申办知乎编辑：程序博客网时间：2024/04/28 17:03

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.

Download the EasyUI example:

easyui-treegrid-demo.zip