jQuery EasyUI Data Grid - Conversione griglia di dati tabella HTML
Questo esempio dimostra come convertire una tabella (tabella) per la griglia di dati (DataGrid).
Data Grid (DataGrid) le informazioni di colonna è definito nel <thead> tag, i dati è definito nel <tbody> tag. Assicurarsi che tutte le impostazioni nomi dei campi dati di colonna, vedere i seguenti esempi:
<Table id = "tt" class = stile "easyui-DataGrid" = "width: 400px; height: auto;"> <Thead> <Tr> <Th campo = larghezza "nome1" = "50"> Col 1 </ th> <Th campo = larghezza "nome2" = "50"> Col 2 </ th> <Th campo = larghezza "NAME3" = "50"> Col 3 </ th> <Th campo = larghezza "NAME4" = "50"> Col 4 </ th> <Th campo = larghezza "NAME5" = "50"> Col 5 </ th> <Th campo = larghezza "name6" = "50"> Col 6 </ th> </ Tr> </ Thead> <Tbody> <Tr> <Td> Dati 1 </ td> <Td> Dati 2 </ td> <Td> Dati 3 </ td> <Td> Dati 4 </ td> <Td> Dati 5 </ td> <Td> Dati 6 </ td> </ Tr> <Tr> <Td> Dati 1 </ td> <Td> Dati 2 </ td> <Td> Dati 3 </ td> <Td> Dati 4 </ td> <Td> Dati 5 </ td> <Td> Dati 6 </ td> </ Tr> <Tr> <Td> Dati 1 </ td> <Td> Dati 2 </ td> <Td> Dati 3 </ td> <Td> Dati 4 </ td> <Td> Dati 5 </ td> <Td> Dati 6 </ td> </ Tr> <Tr> <Td> Dati 1 </ td> <Td> Dati 2 </ td> <Td> Dati 3 </ td> <Td> Dati 4 </ td> <Td> Dati 5 </ td> <Td> Dati 6 </ td> </ Tr> </ Tbody> </ Table>
Grande, è possibile definire un'intestazione tavolo complesso, ad esempio:
<Thead> <Tr> <Th campo = "nome1" width = rowspan "50" = "2"> Col 1 </ th> <Th campo = "nome2" width = rowspan "50" = "2"> Col 2 </ th> <Th campo = "NAME3" width = rowspan "50" = "2"> Col 3 </ th> <Th colspan = "3"> Dettagli </ th> </ Tr> <Tr> <Th campo = larghezza "NAME4" = "50"> Col 4 </ th> <Th campo = larghezza "NAME5" = "50"> Col 5 </ th> <Th campo = larghezza "name6" = "50"> Col 6 </ th> </ Tr> </ Thead>
Ora si può vedere, è stato creato il complesso di testa.