利用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