jQuery EasyUI menu pohon - membuat jala pohon kompleks
Pohon grid (TreeGrid) dapat muncul kompleks dan multi-kolom spreadsheet dengan ruang data terbatas. Tutorial ini menunjukkan bagaimana untuk partisi data tabel disusun dalam grid dan multi-line header untuk mengatur data umum.
Buat jaringan pohon (TreeGrid)
<Table title = "Kompleks TreeGrid" class = "easyui-treegrid" style = "width: 550px; height: 250px" url = "data / treegrid2_data.json" rownumbers = "true" showFooter = "true" idfield = "id" treeField = "wilayah"> <Thead beku = "true"> <Tr> <Th field = "wilayah" 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"> 1 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"> 1 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>
Seperti yang Anda lihat, grid pohon (Treegrid) menggunakan dan data grid (datagrid) sama. Silakan gunakan 'beku' properti untuk menentukan kolom beku, kolom 'colspan' dan properti 'rowspan' untuk mendefinisikan header multi-line.