jQuery EasyUI data Grid - Mengkonversi HTML jaringan data tabel
Contoh ini menunjukkan bagaimana mengkonversi tabel (tabel) untuk jaringan data (datagrid).
Data Grid (datagrid) informasi kolom didefinisikan dalam <thead> tag, data yang didefinisikan dalam <tbody> tag. Pastikan bahwa semua pengaturan nama field kolom data, lihat contoh berikut:
<Table id = "tt" class = "easyui-datagrid" style = "width: 400px; height: auto;"> <Thead> <Tr> <Th field = "name1" width = "50"> Kol 1 </ th> <Th field = "name2" width = "50"> Kol 2 </ th> <Th field = "name3" width = "50"> Kol 3 </ th> <Th field = "NAME4" width = "50"> Kol 4 </ th> <Th field = "NAME5" width = "50"> Col 5 </ th> <Th field = "name6" width = "50"> Col 6 </ th> </ Tr> </ Thead> <Tbody> <Tr> <Td> Data 1 </ td> <Td> data 2 </ td> <Td> data 3 </ td> <Td> data 4 </ td> <Td> data 5 </ td> <Td> data 6 </ td> </ Tr> <Tr> <Td> Data 1 </ td> <Td> data 2 </ td> <Td> data 3 </ td> <Td> data 4 </ td> <Td> data 5 </ td> <Td> data 6 </ td> </ Tr> <Tr> <Td> Data 1 </ td> <Td> data 2 </ td> <Td> data 3 </ td> <Td> data 4 </ td> <Td> data 5 </ td> <Td> data 6 </ td> </ Tr> <Tr> <Td> Data 1 </ td> <Td> data 2 </ td> <Td> data 3 </ td> <Td> data 4 </ td> <Td> data 5 </ td> <Td> data 6 </ td> </ Tr> </ Tbody> </ Table>
Besar, Anda dapat menentukan header tabel yang kompleks, misalnya:
<Thead> <Tr> <Th field = "name1" width = "50" rowspan = "2"> Kol 1 </ th> <Th field = "name2" width = "50" rowspan = "2"> Kol 2 </ th> <Th field = "name3" width = "50" rowspan = "2"> Kol 3 </ th> <Th colspan = "3"> Detail </ th> </ Tr> <Tr> <Th field = "NAME4" width = "50"> Kol 4 </ th> <Th field = "NAME5" width = "50"> Col 5 </ th> <Th field = "name6" width = "50"> Col 6 </ th> </ Tr> </ Thead>
Sekarang Anda dapat melihat, kompleks sundulan telah dibuat.