menu ad albero jQuery EasyUI - creare una rete complessa albero
griglia Albero (TreeGrid) può apparire complesso e multi-colonna di foglio di calcolo con lo spazio dei dati è limitato. Questo tutorial mostra come partizionare i dati della tabella sono disposti in una griglia e multilinea intestazioni al fine di organizzare i dati comuni.
Crea griglia di albero (TreeGrid)
<Tabella title = "Complesso TreeGrid" class = stile "easyui-treegrid" = "width: 550px; height: 250px" url = "dati / treegrid2_data.json" rownumbers = "true" ShowFooter = "true" idField = "id" treeField = "regione"> <Thead congelato = "true"> <Tr> <Th campo = larghezza "regione" = "150"> Regione </ th> </ Tr> </ Thead> <Thead> <Tr> <Th colspan = "4"> 2009 </ th> <Th colspan = "4"> 2010 </ th> </ Tr> <Tr> <Th campo = larghezza "F1" = "50" align = "right"> 1 ° QRT. </ Th> <Th campo = larghezza "F2" = "50" align = "right"> QRT 2 °. </ Th> <Th campo = larghezza "F3" = "50" align = "right"> QRT 3st. </ Th> <Th campo = larghezza "f4" = "50" align = "right"> QRT 4st. </ Th> <Th campo = larghezza "F5" = "50" align = "right"> 1 ° QRT. </ Th> <Th campo = larghezza "F6" = "50" align = "right"> QRT 2 °. </ Th> <Th campo = larghezza "F7" = "50" align = "right"> QRT 3st. </ Th> <Th campo = larghezza "f8" = "50" align = "right"> QRT 4st. </ Th> </ Tr> </ Thead> </ Table>
Come si può vedere, la griglia di albero (TreeGrid) usa e griglia di dati (DataGrid) lo stesso. Si prega di utilizzare la proprietà 'congelato' per definire le colonne congelati, colonne 'colspan' e proprietà 'rowspan' per definire un'intestazione multi-linea.