jQuery EasyUI Data Grid - Convertir tabla de datos tabla HTML
Este ejemplo muestra cómo convertir una tabla (tabla) para la red de datos (cuadrícula de datos).
Data Grid (cuadrícula de datos) información de la columna se define en el <thead> etiqueta, los datos se define en la sección <tbody> etiqueta. Asegúrese de que todos los valores de columna nombres de los campos de datos, ver los siguientes ejemplos:
<Id = clase "tt" Tabla = estilo "easyui-cuadrícula de datos" = "width: 400px; height: auto;"> <Culata en T> <Tr> <= Th Campo anchura "nombre1" = "50"> Col 1 </ th> <= Th Campo anchura "nombre2" = "50"> Col 2 </ th> <= Th Campo anchura "nombre3" = "50"> Col 3 </ th> <= Th Campo anchura "NAME4" = "50"> Col 4 </ th> <= Th Campo anchura "NAME5" = "50"> Col 5 </ th> <= Th Campo anchura "name6" = "50"> Col 6 </ th> </ Tr> </ Culata en T> <Tbody> <Tr> <Td> Datos 1 </ td> <Td> Datos 2 </ td> <Td> Datos 3 </ td> <Td> Datos 4 </ td> <Td> Datos 5 </ td> <Td> Datos 6 </ td> </ Tr> <Tr> <Td> Datos 1 </ td> <Td> Datos 2 </ td> <Td> Datos 3 </ td> <Td> Datos 4 </ td> <Td> Datos 5 </ td> <Td> Datos 6 </ td> </ Tr> <Tr> <Td> Datos 1 </ td> <Td> Datos 2 </ td> <Td> Datos 3 </ td> <Td> Datos 4 </ td> <Td> Datos 5 </ td> <Td> Datos 6 </ td> </ Tr> <Tr> <Td> Datos 1 </ td> <Td> Datos 2 </ td> <Td> Datos 3 </ td> <Td> Datos 4 </ td> <Td> Datos 5 </ td> <Td> Datos 6 </ td> </ Tr> </ Tbody> </ Table>
Grande, se puede definir un encabezado de la tabla compleja, por ejemplo:
<Culata en T> <Tr> <= Th Campo "nombre1" width = rowspan "50" = "2"> Col 1 </ th> <= Th Campo "nombre2" width = rowspan "50" = "2"> Col 2 </ th> <= Th Campo "nombre3" width = rowspan "50" = "2"> Col 3 </ th> <Th colspan = "3"> Detalles </ th> </ Tr> <Tr> <= Th Campo anchura "NAME4" = "50"> Col 4 </ th> <= Th Campo anchura "NAME5" = "50"> Col 5 </ th> <= Th Campo anchura "name6" = "50"> Col 6 </ th> </ Tr> </ Culata en T>
Ahora se puede ver, el complejo de cabecera ha sido creado.