Древовидные структуры данных
Каталог товаров (разделы/позиции). В демо только 1 уровень "дерева". Если сервер не передает уровень данных, то компонент вычисляет его сам.
Код (кликните для просмотра или скрытия)
Минимальный конфиг. Остальное компонент делает автоматически.
Минимальный конфиг. Остальное компонент делает автоматически.
const cfgTree = {
readOnly:true,
// ===== ЗАГРУЗКА ТАБЛИЦЫ =====
autoLoad: true,
data: {
dataKey: 'gridTree',
url: '/api/demo/tree'
},
// ===== SCHEMA =====
schema: {
fields: {
id: {type: 'int', ui: {label: 'id', grid: {visible: false}}},
parentId: {type: 'int', ui: {label: 'parentId', grid: {visible: false}}},
name: {type: 'string', ui: {label: 'Наименование', grid: {visible: true, width: '50%'}}},
nodeType: {type: 'string', ui: {label: 'Тип', grid: {visible: true, width: '50%'}}},
imageName: {
type: 'string',
ui: {label: 'Фото', grid: {visible: true, width: 170, colType: 'image'}}
},
isLeaf: {type:'boolean', ui:{grid:{visible:false}}}
}
},
// ===== VIEW =====
view: {
checkbox: false,
tableTitle: {
enabled: true,
caption:'Продукция',
hint: 'Продукция нашего магазина',
toggle: true
},
pager: {
enabled: true,
rpp: [5, 10, 20]
},
treeGrid: {
enabled: true,
model: 'adjacency',
column: 'name',
pid: 'parentId',
isLeaf: 'isLeaf',
level: 'level'
},
}
};
const gridTree = new ABGrid("#demo-tree", cfgTree);