jQuery EasyUI tree menu - create a complex tree mesh
Tree grid (TreeGrid) can appear complex and multi-column spreadsheet with the data space is limited. This tutorial demonstrates how to partition table data is arranged in a grid and multi-line headers in order to organize common data.
Create tree grid (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 tree grid (Treegrid) use and data grid (Datagrid) the same. Please use the 'frozen' property to define frozen columns, column 'colspan' and 'rowspan' property to define a multi-line header.