Лучшее руководство по JQuery EasyUI Data Grid - Преобразование HTML сетки таблицы данных в 2024 году. В этом руководстве вы можете изучить Скачать примеры Jquery EasyUI,
JQuery EasyUI Data Grid - Преобразование HTML сетки таблицы данных
Этот пример демонстрирует, как преобразовать таблицу (таблица) для сетки данных (DataGrid).
Сетка (DataGrid) Информация столбца данных определяется в теге <THEAD>, данные определены в теге <TBODY>. Убедитесь в том, что все настройки имен полей данных столбцов, смотрите следующие примеры:
<Идентификатор таблицы = класс "тт" = "easyui-DataGrid" стиль = "ширина: 400px; высота: авто;"> <THEAD> <Tr> <Th поле = "name1" ширина = "50"> Col 1 </ й> <Th поле = "имя2" ширина = "50"> Col 2 </ й> <Th поле = "name3" ширина = "50"> Col 3 </ й> <Th поле = "NAME4" ширина = "50"> Col 4 </ й> <Th поле = "name5" ширина = "50"> Col 5 </ й> <Th поле = "name6" ширина = "50"> Col 6 </ й> </ TR> </ THEAD> <TBODY> <Tr> <Td> Данные 1 </ TD> <Td> Данные 2 </ TD> <Td> Данные 3 </ TD> <Td> Данные 4 </ TD> <Td> Данные 5 </ TD> <Td> Данные 6 </ TD> </ TR> <Tr> <Td> Данные 1 </ TD> <Td> Данные 2 </ TD> <Td> Данные 3 </ TD> <Td> Данные 4 </ TD> <Td> Данные 5 </ TD> <Td> Данные 6 </ TD> </ TR> <Tr> <Td> Данные 1 </ TD> <Td> Данные 2 </ TD> <Td> Данные 3 </ TD> <Td> Данные 4 </ TD> <Td> Данные 5 </ TD> <Td> Данные 6 </ TD> </ TR> <Tr> <Td> Данные 1 </ TD> <Td> Данные 2 </ TD> <Td> Данные 3 </ TD> <Td> Данные 4 </ TD> <Td> Данные 5 </ TD> <Td> Данные 6 </ TD> </ TR> </ TBODY> </ Table>
Отлично, вы можете определить сложный заголовок таблицы, например:
<THEAD> <Tr> <Th поле = "name1" ширина = "50" RowSpan = "2"> Col 1 </ й> <Th поле = "имя2" ширина = "50" RowSpan = "2"> Col 2 </ й> <Th поле = "name3" ширина = "50" RowSpan = "2"> Col 3 </ й> <Th Colspan = "3"> Подробнее </ й> </ TR> <Tr> <Th поле = "NAME4" ширина = "50"> Col 4 </ й> <Th поле = "name5" ширина = "50"> Col 5 </ й> <Th поле = "name6" ширина = "50"> Col 6 </ й> </ TR> </ THEAD>
Теперь вы можете видеть, сложный заголовок был создан.