Одиночная таблица
Демонстрация базовой загрузки и отображения данных.
Код (кликните для просмотра или скрытия)
const cfgP = {
readOnly:true,
// ===== ЗАГРУЗКА ТАБЛИЦЫ =====
autoLoad: true,
data: {
dataKey: 'gridP',
url: '/api/demo/simple'
},
// ===== SCHEMA =====
schema: {
fields: {
id: {type: 'int', ui: {label: 'id', grid: {visible: false}}},
categoryId: {type: 'int', ui: {label: 'categoryId', grid: {visible: false}}},
category: {type: 'string', ui: {label: 'Категория', grid: {visible: true, width: '20%'}}},
name: {type: 'string', ui: {label: 'Наименование', grid: {visible: true, width: '60%'}}},
price: {type: 'number', ui: {label: 'Цена', grid: {visible: true, width: '15%'}}},
imageName: {type: 'string', ui: {label: 'Иконка', grid: {visible: true, width: 340, colType: 'image'}}}
}
},
// ===== VIEW =====
view: {
checkbox: true,
tableTitle: {
enabled: true,
caption:'Продукция',
hint: 'Продукция нашего магазина',
toggle: true
},
pager: {
enabled: true,
rpp: [3, 5, 10]
}
}
};
// ===== Создание объекта компонента =====
var gridP = new ABGrid('#demo-simple',cfgP);
Для сортировки просто кликайте мышкой по столбцам, для мультисортировки удерживайте клавишу Ctrl или Shift для выбора столбцов (клик по столбцу определяет направление сортировки). При отпускании клавиши сработает загрузка данных. Двойной клик мышкой по строке выведет в правом верхнем углу на 3 секунды сообщение о том, что включен режим readOnly.