jQuery EasyUI Data Grid - Convertir HTML grille de données de table
Cet exemple montre comment convertir un tableau (tableau) pour la grille de données (DataGrid).
Data Grid (DataGrid) informations de colonne est définie dans le <thead> tag, les données sont définies dans la balise <tbody> tag. Assurez-vous que tous les paramètres des noms de champs de données de colonne, voir les exemples suivants:
<Table id = classe "tt" = "easyui-datagrid" style = "width: 400px; height: auto;"> <Thead> <Tr> <Th field = largeur "nom1" = "50"> Col 1 </ th> <Th field = largeur "nom2" = "50"> Col 2 </ th> <Th field = largeur "de nom3" = "50"> Col 3 </ th> <Th field = largeur "de nom4" = "50"> Col 4 </ th> <Th field = largeur "de nom5" = "50"> Col 5 </ th> <Th field = largeur "de nom6" = "50"> Col 6 </ th> </ Tr> </ Thead> <TBODY> <Tr> <Td> Données 1 </ td> <Td> Données 2 </ td> <Td> Données 3 </ td> <Td> Données 4 </ td> <Td> Données 5 </ td> <Td> Données 6 </ td> </ Tr> <Tr> <Td> Données 1 </ td> <Td> Données 2 </ td> <Td> Données 3 </ td> <Td> Données 4 </ td> <Td> Données 5 </ td> <Td> Données 6 </ td> </ Tr> <Tr> <Td> Données 1 </ td> <Td> Données 2 </ td> <Td> Données 3 </ td> <Td> Données 4 </ td> <Td> Données 5 </ td> <Td> Données 6 </ td> </ Tr> <Tr> <Td> Données 1 </ td> <Td> Données 2 </ td> <Td> Données 3 </ td> <Td> Données 4 </ td> <Td> Données 5 </ td> <Td> Données 6 </ td> </ Tr> </ Tbody> </ Table>
Grand, vous pouvez définir un en-tête de table complexe, par exemple:
<Thead> <Tr> <Th field = "nom1" width = rowspan "50" = "2"> Col 1 </ th> <Th field = "nom2" width = rowspan "50" = "2"> Col 2 </ th> <Th field = "nom3" width = rowspan "50" = "2"> Col 3 </ th> <Th colspan = "3"> Détails </ th> </ Tr> <Tr> <Th field = largeur "de nom4" = "50"> Col 4 </ th> <Th field = largeur "de nom5" = "50"> Col 5 </ th> <Th field = largeur "de nom6" = "50"> Col 6 </ th> </ Tr> </ Thead>
Maintenant, vous pouvez le voir, le complexe d'en-tête a été créé.