JS API
Получение экземпляра грида
import {Type} from 'main.core'; const grid: BX.Main.grid = BX.Main.gridManager.getById('MY_GRID_ID')?.instance; if (Type.isObject(grid)) { // use API here }
Основные методы
Работа с коллекцией строк
import {Type} from 'main.core'; const grid: BX.Main.grid = BX.Main.gridManager.getById('MY_GRID_ID')?.instance; if (Type.isObject(grid)) { // Обертка над коллекцией строк const rowsCollectionWrapper: BX.Grid.Rows = grid.getRows(); // Список всех строк, включая шапку и подвал const rowsList: Array= rowsCollectionWrapper.getRows(); // Строки тела таблицы const bodyRowsList: Array = rowsCollectionWrapper.getBodyChild(); // Выбранные строки const selectedRowsList: Array = rowsCollectionWrapper.getSelected(); // Идентификаторы выбранных строк const selectedRowsIdsList: Array = rowsCollectionWrapper.getSelectedIds(); // Получение экземпляра строки по ID const row: Array = rowsCollectionWrapper.getById('myRowId'); // Получение экземпяра строки по ссылке на ноду const row2: Array = rowsCollectionWrapper.get(rowNode); // Выбрать все строки void rowsCollectionWrapper.selectAll(); // Отменить выбор всех строк void rowsCollectionWrapper.unselectAll(); // Включить инлайн-редактирование void rowsCollectionWrapper.editSelected(); // Отключить инлайн-редактирование void rowsCollectionWrapper.editSelectedCancel(); }
Добавление и обновление строк, показ заглушки (Без перезагрузки)
import {Type} from 'main.core'; const grid: BX.Main.grid = BX.Main.gridManager.getById('MY_GRID_ID')?.instance; if (Type.isObject(grid)) { // Обертка const gridRealtime: BX.Grid.Realtime = grid.getRealtime(); // Добавление новой строки gridRealtime.addRow({ id: 10, insertBefore: 3, columns: { colId1: 'Column 1 content', colId2: 'Column 2 content', colId3: 'Column 3 content', }, actions: [ {id: 1, text: 'My Action', onclick: 'callMyAction()'}, ], }); // Доступные параметры новой строки type AddRowOptions = { id: number | string, actions?: Array<{[key: string]: any}>, columns?: {[key: string]: any}, append?: true, prepend?: true, insertBefore?: number | string, insertAfter?: number | string, animation?: boolean, cellActions?: Array<{ 'class': Array<$Value| $Value >, events?: {[eventName: string]: (BaseEvent) => void}, attributes?: {[key: string]: any}, }>, }; // Добавление строки со счетчиками gridRealtime.addRow({ ..., counters: { columnId: { type: BX.Grid.Counters.Type.LEFT_ALIGNED, color: BX.Grid.Counters.Color.DANGER, value: 77, events: { click: console.log, }, 'class': 'my-custom-counter-class', }, }, }); // Добавление/обновление счетчиков в существующей строке const row: BX.Grid.Row = grid.getRows().getById(rowId); row.setCounters({ columnId: { type: BX.Grid.Counters.Type.LEFT_ALIGNED, color: BX.Grid.Counters.Color.DANGER, value: 77, }, }); // Заглушка по умолчанию (Нет данных) gridRealtime.showStub(); // Заглушка по дефолтному шаблону заголовок + описание gridRealtime.showStub({ content: { title: 'Текст заглушки', description: 'Описание', } }); // Кастомная заглушка gridRealtime.showStub({ content: '<div ...>...</div>', // string | HTML | Element }); }
© «Битрикс», 2001-2024, «1С-Битрикс», 2024