Дерево меню JQuery EasyUI - создать сложную древовидную сетку
Дерево сетки (TreeGrid) может оказаться сложной и нескольких столбцов таблицы с пространством данных ограничено. В этом учебнике показано, как разделить таблицу данные организованы в виде сетки и многострочных заголовков для организации общих данных.
Создание дерева сетки (TreeGrid)
<Таблица название = класс "Комплекс TreeGrid" = "easyui-TreeGrid" стиль = "ширина: 550px; высота: 250px" URL = "Данные / treegrid2_data.json" rownumbers = "истина" showFooter = "истина" idField = "ИД" treeField = "область"> <THEAD замороженная = "истинный"> <Tr> <Th поле = "область" ширина = "150"> область </ й> </ TR> </ THEAD> <THEAD> <Tr> <Th Colspan = "4"> 2009 </ й> <Th Colspan = "4"> 2010 </ й> </ TR> <Tr> <Th поле = "f1" ширина = "50" выровняйте = "право"> 1-й QRT. </ Th> <Th поле = "f2" ширина = "50" выровняйте = "право"> 2st QRT. </ Th> <Th поле = "f3" ширина = "50" выровняйте = "право"> 3st QRT. </ Th> <Th поле = "f4" ширина = "50" выровняйте = "право"> 4st QRT. </ Th> <Th поле = "f5" ширина = "50" выровняйте = "право"> 1-й QRT. </ Th> <Th поле = "f6" ширина = "50" выровняйте = "право"> 2st QRT. </ Th> <Th поле = "f7" ширина = "50" выровняйте = "право"> 3st QRT. </ Th> <Th поле = "f8" ширина = "50" выровняйте = "право"> 4st QRT. </ Th> </ TR> </ THEAD> </ Table>
Как вы можете видеть, дерево сетки (TreeGrid) использование и сетки данных (Datagrid) то же самое. Пожалуйста, используйте свойство «замороженный», чтобы определить замороженные столбцы, колонки 'Colspan' и свойство 'RowSpan', чтобы определить заголовок из нескольких строк.