The best jQuery EasyUI Data Grid - Convert HTML table data grid Tutorial In 2024, In this tutorial you can learn Download jQuery EasyUI examples,
This example demonstrates how to convert a table (table) for the data grid (datagrid).
Data Grid (datagrid) column information is defined in the <thead> tag, the data is defined in the <tbody> tag. Ensure that all data field names column settings, see the following examples:
<Table id = "tt" class = "easyui-datagrid" style = "width: 400px; height: auto;"> <Thead> <Tr> <Th field = "name1" width = "50"> Col 1 </ th> <Th field = "name2" width = "50"> Col 2 </ th> <Th field = "name3" width = "50"> Col 3 </ th> <Th field = "name4" width = "50"> Col 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>
Great, you can define a complex table header, for example:
<Thead> <Tr> <Th field = "name1" width = "50" rowspan = "2"> Col 1 </ th> <Th field = "name2" width = "50" rowspan = "2"> Col 2 </ th> <Th field = "name3" width = "50" rowspan = "2"> Col 3 </ th> <Th colspan = "3"> Details </ th> </ Tr> <Tr> <Th field = "name4" width = "50"> Col 4 </ th> <Th field = "name5" width = "50"> Col 5 </ th> <Th field = "name6" width = "50"> Col 6 </ th> </ Tr> </ Thead>
Now you can see, the header complex has been created.