Документация ABGrid Engine

«Сложное — просто. Вы делаете конфигурацию — остальное ABGrid Engine.»

О продукте

ABGrid Engine — декларативный JavaScript‑компонент для работы со сложными табличными данными.
Компонент написан на чистом JavaScript, не имеет внешних зависимостей и ориентирован на корпоративные и административные интерфейсы.
ABGrid Engine проектировался не как “таблица”, а как полноценный интерфейс взаимодействия с данными.
Компонент корректно ведёт себя при ошибках сервера, истёкшей сессии, изменении прав и перезагрузке приложения — без “молчаливых” сбоев и
неожиданных состояний для пользователя.
Большинство grid-компонентов фокусируются на отображении данных. ABGrid Engine фокусируется на поведении интерфейса в реальных условиях.
ABGrid Engine реализует полный клиент–серверный цикл синхронизации данных, обеспечивая предсказуемое и согласованное состояние интерфейса после каждой CRUD-операции.

Ключевые возможности

• Минимум или полное отсутствие необходимости пользовательского кода, всё поведение из конфигурации.
• Встроенный CRUD-механизм, серверная пагинация.
• Сортировка, мультсортировка, фильтрация.
• Режимы Master / Detail, Subgrid, TreeGrid в любом сочетании неограниченной иеарархии и без "ручной" синхронизации.
• Встроенный Editor с формой редактирования и конфигурируемой валидацией, с кастомной валидацией.
• Встроенная загрузка файлов. Поддержка file-полей в редакторе: выбор файла, валидация и отправка multipart — всё автоматически, без ручной реализации.
• Обновление данных после серверных операций:
  
  • В режиме создания и редактирования строки при успешном выполнении операции на сервере и возврате обновлённой записи: полученные данные синхронизируются с внутренним репозиторием компонента, форма редактирования автоматически обновляется актуальными значениями, в том числе корректно отображаются поля, вычисляемые или модифицируемые на стороне сервера.
  • При создании новой записи и успешном ответе сервера встроенная форма редактора автоматически переходит в режим редактирования в соответствии с заданной конфигурацией в этом режиме и заполняется сохраненными данными. При этом набор полей редактирования может отличаться от режима создания новой записи.
  • При удалении строк, после подтверждения операции сервером, записи удаляются как из внутреннего репозитория, так и из отображаемого грида.
  • Таким образом, компонент обеспечивает строгую консистентность данных без необходимости перезагрузки страницы или повторного открытия формы.
• Встроенный механизм autocomplete, confirm‑поля для встроенного редактора.
• Режим чистого View с external controller (intents).
• Глобальная политика авторизации. Может быть одна на всё приложение.
• Политики прав (policy) для CRUD-операций. Может быть установлены программно из кода или автоматически из ответов сервера.
• Интерцепторы request, response, error.
• Интеграция с React.
• Интеграция c Vue.

Дополнительные возможности для разработчика:

• Возможность использования системных диалогов в своем коде (msg, confirm).
• Возможность использования встроенного HTTP-клиента для запросов на сервер.
• Возможность использования системных сообщений в своем коде.
• Возможность подключения системного autocomplete к своим input.

Подключение

<link rel="stylesheet" href="/abgrid-engine/abgrid-structure.css">
<link rel="stylesheet" href="/abgrid-engine/abgrid-icons.css">
<link rel="stylesheet" href="/abgrid-engine/themes/abgrid-theme-blue-pro.css">
<script src="/abgrid-engine/abgrid.min.js" defer></script>

Быстрый старт

<div id="grid"></div>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const grid = new ABGrid('#grid', {
      autoLoad: true,
      data: { url: '/api/items' },
      schema: {
        fields: {
          id: {type: 'int', ui: {label: 'id', grid: {visible: false}}},
          name: {type: 'string', ui: {label: 'Наименование', grid: {visible: true, width: '85%'}}},
          price: {type: 'number', ui: {label: 'Цена', grid: {visible: true, width: '15%'}}},
          imageName: {type: 'string', ui: {label: 'Иконка', grid: {visible: true, width: 340, colType: 'image'}}}
        }
      },
      view: {
        checkbox: true,
        height: 500,
        tableTitle: {
          enabled: true,
          caption:'Продукция',
          hint: 'Продукция нашего магазина',
          toggle: true
        },
        pager: {
          enabled: true,
          rpp: [3, 5, 10]
        }
      }
    });
  });
</script>