CRUD demo
Демонстрация встроенного CRUD-протокола, интерцептора request. Редактирование, добавление и удаление записи работает по кнопкам. Внутренняя форма редактирования открывается так же по двойному клику по строке.
Код (кликните для просмотра или скрытия)
Минимальный конфиг. Остальное компонент делает автоматически.
Минимальный конфиг. Остальное компонент делает автоматически.
var toggle = document.querySelector(toggleSelector);
// POST /api/demo/crud
const productCrud = {
data: {
dataKey: 'gridCrud',
url: '/api/demo/crud',
// ===== INTERCEPTORS =====
interceptors: {
request:(ctx) => {
if (ctx.data === null) return;
ctx.data.extData = {};
ctx.data.extData["customresult"] = toggle.checked;
}
}
},
// ===== SCHEMA =====
schema: {
fields: {
id: {type: 'int', ui: {label: 'id', grid: {visible: false}},
editor: { edit: { visible: false }, create: { visible: false }}},
categoryId: {
type: 'int',
values: { enum: [{ value: 1, text: 'Телевизоры' }, { value: 2, text: 'Компьютеры' }, { value: 3, text: 'Холодильники' }] },
editor: { type:'select', edit: { visible: true, required: true }, create: { visible: true, required: true } },
ui: { label: 'Категория', grid: {visible: false} }
},
name: { type: 'string', ui: {label: 'Наименование', grid: {visible: true, width: '60%'}},
editor: {
type:'text',
edit: { visible: true, required: true },
create: { visible: true, required: true }
}
},
price: { type: 'number', ui: {label: 'Цена', grid: {visible: true, width: '15%'}},
editor: {
type:'text',
edit: { visible: true, required: true },
create: { visible: true, required: true }
}
},
imageName: {
type: 'string',
ui: { label: 'Фото', grid: {visible: true, width: 160, colType: 'image'} }
},
}
},
// ===== VIEW =====
view: {
height:440,
checkbox: true,
tableTitle: {
enabled: true,
caption:'Продукция',
hint: 'Продукция нашего магазина',
toggle: true
},
toolBar:{
add: { caption: 'Добавить', hint: 'Новый товар' },
edit: { caption: 'Изменить', hint: 'Редактирование тоара' },
del: { caption: 'Удалить', hint: 'Удалить товар' }
},
pager: {
enabled: true,
rpp: [3, 5, 10]
}
}
}
const gridCrud = new ABGrid(container, productCrud);
Это влияет только на ответы CRUD-операций. Реальные данные на сервере не изменяются.