jQuery EasyUI Data Grid - HTML-Tabelle Datenraster konvertieren
Dieses Beispiel zeigt, wie Sie eine Tabelle (Tabelle) für das Datenraster (Datagrid) zu konvertieren.
Data Grid (Datagrid) Spalteninformationen in der definiert ist <thead> -Tag, werden die Daten in dem definierten <tbody> Tag. Stellen Sie sicher, dass alle Datenfeldnamen Spalteneinstellungen, siehe folgende Beispiele:
<Table id = "tt" class = "easyui-Datagrid" style = "width: 400px; height: auto;"> <Thead> <Tr> <Th Feld = "name1" width = "50"> Col 1 </ th> <Th Feld = "name2" width = "50"> Col 2 </ th> <Th Feld = "name3" width = "50"> Col 3 </ th> <Th Feld = "name4" width = "50"> Col 4 </ th> <Th Feld = "name5" width = "50"> Col 5 </ th> <Th Feld = "name6" width = "50"> Col 6 </ th> </ Tr> </ Thead> <Tbody> <Tr> <Td> Data 1 </ td> <Td> Data 2 </ td> <Td> Data 3 </ td> <Td> Daten 4 </ td> <Td> Daten 5 </ td> <Td> Daten 6 </ td> </ Tr> <Tr> <Td> Data 1 </ td> <Td> Data 2 </ td> <Td> Data 3 </ td> <Td> Daten 4 </ td> <Td> Daten 5 </ td> <Td> Daten 6 </ td> </ Tr> <Tr> <Td> Data 1 </ td> <Td> Data 2 </ td> <Td> Data 3 </ td> <Td> Daten 4 </ td> <Td> Daten 5 </ td> <Td> Daten 6 </ td> </ Tr> <Tr> <Td> Data 1 </ td> <Td> Data 2 </ td> <Td> Data 3 </ td> <Td> Daten 4 </ td> <Td> Daten 5 </ td> <Td> Daten 6 </ td> </ Tr> </ Tbody> </ Table>
Große, können Sie eine komplexe Tabellenkopf, zum Beispiel definieren:
<Thead> <Tr> <Th Feld = "name1" width = "50" rowspan = "2"> Col 1 </ th> <Th Feld = "name2" width = "50" rowspan = "2"> Col 2 </ th> <Th Feld = "name3" width = "50" rowspan = "2"> Col 3 </ th> <Th colspan = "3"> Details </ th> </ Tr> <Tr> <Th Feld = "name4" width = "50"> Col 4 </ th> <Th Feld = "name5" width = "50"> Col 5 </ th> <Th Feld = "name6" width = "50"> Col 6 </ th> </ Tr> </ Thead>
Jetzt können Sie die Header-Komplex zu sehen, erstellt wurde.