S1:E1 — Здравствуйте, мир AG Grid

Введение

В этом эпизоде мы увидим, как создать базовую сеть AG и заставить ее работать.

AG Grid поставляется со следующими вкусами

Javascript — Обычная ванильная версия JS
Реагировать
Угловой
Вью

AG Grid имеет две разные версии

Сообщество AG Gride — это бесплатное приложение с открытым исходным кодом.
Ag Gride Enterprise — это коммерческое предприятие, для которого требуется покупка лицензии.

Мы также можем использовать «AG Gride Community» в производственной среде. У него меньше функций и нет технической поддержки по сравнению с версией Enterprise.

Что мы будем использовать в этом эпизоде?

Мы собираемся использовать версию «AG Grid Community», версию «Javascript» и статические данные строк.

Шаги по созданию AG Gride

Импорт библиотеки AG Gride
Создание HTML-элемента-заполнителя
Создание объекта AG Grid

Импорт библиотеки AG Gride

Есть два варианта импорта библиотеки AG Gride (используя CDN).

Импорт AG Gride JS, который включает все файлы AG Gride JS и CSS

<script src="<https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js>"></script>

JS-файл ag-grid-community.min.js будет включать JS-библиотеку AG Gride, файлы Core CSS, CSS-файлы тем.

Импорт файла AG Gride JS, файла Core CSS и CSS темы

<!-- AG Gride core JS library -->
<script src="<https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js>"></script>

<!-- AG Gride core CSS files -->
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css>"/>

<!-- AG Gride theme CSS files -->
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css>"/>

Создание HTML-элемента-заполнителя

Создайте элемент уровня блока со следующими атрибутами

id — выбрать этот элемент для загрузки AG Grid
высота и ширина стиля — которые будут использоваться для определения высоты и ширины AG Gride.
class для имени темы — имя класса для применения темы

<div
      id="my-ag-grid"
      style="height: 300px; width: 850px"
      class="ag-theme-alpine"
></div>

Создание объекта AG Grid

Нам нужно создать объект AG Grid, и он принимает два аргумента.

Параметр Fist — это объект Element, который указывает на созданный нами элемент HTML-заполнителя.
Второй параметр — это объект опции Grid, который будет иметь огромный список свойств, необходимых для рендеринга сетки.

//Parameter #1 - creating Element object of placeholder HTML element
const gridDiv = document.querySelector('#my-ag-grid');

//Parameter #2 - creating Grid option with two properties "columnDefs" and "rowData"
const gridOptions = {
  columnDefs: [
    { field: 'firstName' },
    { field: 'lastName' },
    { field: 'age' },
    { field: 'country' },
  ],
  rowData: [
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
  ],
};

//Creating AG Gride object
new agGrid.Grid(gridDiv, gridOptions);

Полный пример

Имя файла: index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Ag Grid 1</title>
    <script src="<https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js>"></script>
  </head>
  <body>
    <h1>AG Grid 1</h1>
    <div
      id="my-ag-grid"
      style="height: 300px; width: 850px"
      class="ag-theme-alpine"
    ></div>
  </body>
</html>

Имя файла: index.js

//Parameter #1 - creating Element object of placeholder HTML element
const gridDiv = document.querySelector('#my-ag-grid');

//Parameter #2 - creating Grid option with two properties "columnDefs" and "rowData"
const gridOptions = {
  columnDefs: [
    { field: 'firstName' },
    { field: 'lastName' },
    { field: 'age' },
    { field: 'country' },
  ],
  rowData: [
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
  ],
};

//Creating AG Gride object
new agGrid.Grid(gridDiv, gridOptions);

Спасибо за чтение 🙂