Сегодня поговорим о высокопроизводительном табличном компоненте, доступном нам в JavaScript, Bryntum Grid. Bryntum Grid — это мощный и мощный табличный компонент, способный обрабатывать более 100 000 строк, обеспечивая при этом отличный пользовательский интерфейс. Сетка Bryntum может рассматриваться как усиленная версия сетки-дерева молнии и таблицы данных с таким количеством эксцентричных функций, которых нет в базовых компонентах таблицы молнии. Сетка Bryntum — это чистый компонент сетки JavaScript, который легко интегрируется с популярными фреймворками, где нам повезло, поскольку его также можно использовать в разработке отдела продаж LWC. Bryntum Grid хорошо работает как в начале, так и во время прокрутки. Некоторые выделенные особенности сетки:
- Быстрый виртуальный рендеринг
- Несколько прокручиваемых разделов столбцов
- Встроенное редактирование ячеек
- Пользовательский рендеринг ячеек
- Группировка строк и заголовков
- Фильтрация и поиск
- Сетка деревьев и многое другое.
В этой статье мы рассмотрим, как создать и интегрировать сетку bryntum с Salesforce LWC. Мы также создаем базовый общий компонент сетки bryntum, чтобы вам не приходилось снова выполнять всю тяжелую работу в вашей среде разработки. Я также поделюсь репозиторием git для проекта, где я уже создал общий компонент для всех, но этот компонент слишком прост для рассмотрения. Сетка bryntum имеет множество разновидностей сетки и способов ее использования. Все содержимое столбцов и данные варьируются в зависимости от требований, но все же я попытался изучить типы сетки и вывести самые основные необходимые данные сетки, которые я показал в своем репозитории сетки. Но все же я бы порекомендовал ознакомиться со статьей, раз вам нужна собственная настроенная сетка.
Бринтум Грид в Salesforce
Salesforce Lightning позволяет использовать сторонние JS-библиотеки для создания веб-приложений. Bryntum Grid использует ряд собственных веб-API, некоторые из которых модифицированы (или полностью заблокированы) Lightning Locker. Salesforce рекомендует всегда выбирать веб-компоненты Lightning. С учетом сказанного давайте сначала перейдем к части интеграции.
Начиная
Нажмите на ссылку и загрузите демо-версию проекта для Salesforce, настоятельно рекомендуется, если вы хотите изучить все виды реализации сетки.
Настраивать
- Перейдите на свою игровую площадку или создайте новую, где включен Dev Hub.
- Создайте стандартный проект для сетки byrntum из vscode и назовите сетку bryntum (вы можете назвать соответственно)
- Авторизовать центр разработки в проекте
- Создать Scratch-организацию
С этого момента я сначала дам вам знать, как мы можем легко добавить сетку bryntum в наш проект, это не та задача tds, которую нужно выполнить. Но помимо этого я покажу вам, как мы можем создать общий компонент сетки byrntum, который мы можем использовать где угодно после базовой настройки.
5. Скопируйте статический ресурс из папки сетки примеров, examples/salesforce/src/staticresources/bryntum_grid.resource-meta.xml в каталог, в котором находится статический ресурс.
6. Создайте папку внутри статического ресурса с именем каталога вашего проекта как bryntum_grid и скопируйте необходимые источники в папку статических ресурсов, требуемые источники:
Пакет JS для LWC
Пакет CSS
Языки
Шрифты
Эти ресурсы можно найти в папке сборки загруженного примера. Вы должны скопировать
grid.lwc.module.js
grid.stockholm.css
grid.d.ts
локали
шрифты
Отправьте эти статические ресурсы в организацию прямо сейчас.
Это создало компонент, который содержит сетку bryntum, за которую мы боролись. Теперь вопрос в том, сколько раз вы будете повторять одну и ту же настройку в файле js, когда захотите использовать сетку bryntum в своем проекте. Дело в том, что мы не можем делать это всегда, конечно. Итак, вот решение для базовых данных сетки.
использование
- Создайте имя компонента LWC как bryntum_grid
- Добавьте в компонент events.js, в файл добавьте два события, одно для готовности, а другое для ошибки.
класс ReadyEvent расширяет CustomEvent {
конструктор() {
super(‘ready’);
}
}
класс ErrorEvent расширяет CustomEvent {
конструктор (Ошибка) {
супер('ошибка', {
деталь: Ошибка
});
}
}
3. Добавьте эту строку ‹div lwc:dom="manual"›‹/div› в HTML-код компонента.
4. В части js теперь основная загвоздка для создания общего компонента.
а. Сначала рассмотрим импорт
import { ReadyEvent, ErrorEvent } из './events';
import { loadScript, loadStyle } из 'lightning/platformResourceLoader';
import GRID из '@ Salesforce/resourceUrl/bryntum_grid’;
Здесь я импортировал события, которые будут уведомлять, когда сетка будет готова к загрузке, или при загрузке возникнет какая-то ошибка. Также импортированы сервисы шкафчиков, которые будут загружать стили и скрипты. И, наконец, GRID из статического ресурса
б. Во-вторых, если вы прошли через grid_component из примера, у вас должна быть сцена, в которой компонент сетки загружается после обратного вызова, поэтому я взял эту часть кода, чтобы передать событие готовности события ошибки родительскому компоненту.
renderedCallback() {
if (this.bryntumInitialized) {
return;
}
this.bryntumInitialized = true;
Promise.all([
loadScript(this, GRID + '/grid.lwc.module.js'),
loadStyle(this, GRID + '/grid.stockholm.css')
]).then(() =› {
this.dispatchEvent(new ReadyEvent());
}).catch(error =› {
this.dispatchEvent(
new ErrorEvent('Некоторые ошибки при отрисовке сетки')
);
});
}
в. Теперь основная часть, после обработки готового события в родительском компоненте, нам нужно будет создать данные или, скажем, инициализировать сетку с данными, для чего я создал публичный метод в этом компоненте,
@api createGrid(initialConfig) {
initialConfig = { …initialConfig, appendTo: this.appendTo};
window.grid = new bryntum.grid.Grid(initialConfig);
}< br />
Здесь initialConfig — это конфигурация данных для сетки.
д. Наконец, нам нужно добавить сетку в html, поэтому не забудьте добавить свойство append to в файл initialConfig. Но вы можете сказать, что почему мы не добавили это из родительского компонента. Итак, ответ очень прост, потому что сетка должна быть создана в этом компоненте, и в родительском компоненте не будет никакой ссылки на дочерний тег div. Итак, мы добавим геттер в этот компонент
get appendTo() {
return this.template.firstChild;
}
Вот почему этот компонент теперь является обычным компонентом инициализации byrntum. Теперь нам нужно обработать событие готовности и ошибки в родительском компоненте и передать конфигурацию в createGrid, и ваш BryntumGrid готов к использованию. Я добавил ссылки и репозиторий git, обратитесь к ним, чтобы узнать больше о сетке brytum. Также это можно использовать в компоненте AURA.
