ABGrid Engine

Древовидные структуры данных

Каталог товаров (разделы/позиции). В демо только 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);