利用TreeGrid做简单数据报表

jquery-easyui中的TreeGrid继承DataGrid的很多特性，比如复杂表头，冻结列等，利用这些特性可以制作一般的数据报表。

 

 

创建方法基本同datagrid，所不同的是需要定义treeField属性以指定那个字段可以收缩和展开：

$('#test').treegrid({
    title:'Complex TreeGrid',
    width:550,
    height:300,
    rownumbers: true,
    animate:true,
    url:'treegrid_data.json',
    idField:'region',
    treeField:'region',
    frozenColumns:[[
        {title:'Region',field:'region',width:100,rowspan:2}
    ]],
    columns:[[
        {title:'2009',colspan:4},
        {title:'2010',colspan:4}
    ],[
        {field:'f1',title:'1st qrt.',width:50,align:'right'},
        {field:'f2',title:'2nd qrt.',width:50,align:'right'},
        {field:'f3',title:'3rd qrt.',width:50,align:'right'},
        {field:'f4',title:'4th qrt.',width:50,align:'right'},
        {field:'f5',title:'1st qrt.',width:50,align:'right'},
        {field:'f6',title:'2nd qrt.',width:50,align:'right'},
        {field:'f7',title:'3rd qrt.',width:50,align:'right'},
        {field:'f8',title:'4th qrt.',width:50,align:'right'}
    ]]
});

 

原文及下载地址：http://jquery-easyui.wikidot.com/tutorial:treegrid2