YouTipjQuery EasyUI DataGrid – Convert HTML Table to DataGrid
This example demonstrates how to convert a table (<table>) into a datagrid.
The datagrid's column information is defined within the <thead> tag, and the data is defined within the <tbody> tag. Ensure that a field name is set for all data columns. Please see the example below:
| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 | Col 6 |
|---|---|---|---|---|---|
| Data 1 | Data 2 | Data 3 | Data 4 | Data 5 | Data 6 |
| Data 1 | Data 2 | Data 3 | Data 4 | Data 5 | Data 6 |
| Data 1 | Data 2 | Data 3 | Data 4 | Data 5 | Data 6 |
| Data 1 | Data 2 | Data 3 | Data 4 | Data 5 | Data 6 |
Excellent! You can also define a complex header, for example:
| Col 1 | Col 2 | Col 3 | Details | ||
|---|---|---|---|---|---|
| Col 4 | Col 5 | Col 6 | |||
| Data 1 | Data 2 | Data 3 | Data 4 | Data 5 | Data 6 |
Now you can see that the complex header has been created.