jQuery EasyUI Data Grid - Converter grade de dados tabela HTML
Este exemplo demonstra como converter uma tabela (tabela) para a rede de dados (grade de dados).
Data Grid (grade de dados) informações da coluna é definido na tag <thead>, os dados são definidos na tag <tbody>. Certifique-se de que todas as configurações nomes de campos de dados de coluna, consulte os seguintes exemplos:
<Table id = class "tt" = "easyui-datagrid" style = "width: 400px; height: auto;"> <Thead> <Tr> <Th campo = largura "nome1" = "50"> Col 1 </ th> <Th campo = largura "nome2" = "50"> Col 2 </ th> <Th campo = largura "nome3" = "50"> Col 3 </ th> <Th campo = largura "NAME4" = "50"> Col 4 </ th> <Th campo = largura "Name5" = "50"> Col 5 </ th> <Th campo = largura "name6" = "50"> Col 6 </ th> </ Tr> </ Thead> <Tbody> <Tr> <Td> Data 1 </ td> <Td> Dados 2 </ td> <Td> Dados 3 </ td> <Td> Data 4 </ td> <Td> Dados 5 </ td> <Td> Data 6 </ td> </ Tr> <Tr> <Td> Data 1 </ td> <Td> Dados 2 </ td> <Td> Dados 3 </ td> <Td> Data 4 </ td> <Td> Dados 5 </ td> <Td> Data 6 </ td> </ Tr> <Tr> <Td> Data 1 </ td> <Td> Dados 2 </ td> <Td> Dados 3 </ td> <Td> Data 4 </ td> <Td> Dados 5 </ td> <Td> Data 6 </ td> </ Tr> <Tr> <Td> Data 1 </ td> <Td> Dados 2 </ td> <Td> Dados 3 </ td> <Td> Data 4 </ td> <Td> Dados 5 </ td> <Td> Data 6 </ td> </ Tr> </ Tbody> </ Table>
Ótimo, você pode definir um cabeçalho da tabela complexa, por exemplo:
<Thead> <Tr> <Th campo = "nome1" width = rowspan "50" = "2"> Col 1 </ th> <Th campo = "nome2" width = rowspan "50" = "2"> Col 2 </ th> <Th campo = "nome3" width = rowspan "50" = "2"> Col 3 </ th> <Th colspan = "3"> Detalhes </ th> </ Tr> <Tr> <Th campo = largura "NAME4" = "50"> Col 4 </ th> <Th campo = largura "Name5" = "50"> Col 5 </ th> <Th campo = largura "name6" = "50"> Col 6 </ th> </ Tr> </ Thead>
Agora você pode ver, o complexo de cabeçalho foi criado.