ABGrid Engine

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-операций. Реальные данные на сервере не изменяются.