jQuery EasyUI使用教程之创建复杂的树网格

树网格可以展示有限空间上附带的多列和复杂数据电子表格。本教程将演示如何将表格数据排列在分割的网格和多行表头中，以便组织共同的数据。

jQuery EasyUI最新试用版下载请猛戳>>

点击查看示例

创建树形网格

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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

正如您所看到的，树网格的使用和数据网格一样。请使用 'frozen' 属性来定义冻结列，列的 'colspan' 和 'rowspan' 属性来定义多行表头。

下载EasyUI示例：easyui-treegrid-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程>>