Таблицы

Таблицы прежде всего предназначены для отображения и манипуляций с данными, но также являются точкой входа/старта для различных кастомных функций, реализующих бизнес-логику проекта.

Это может быть:

• Открытие формы со стандартным или кастомным интерфейсом.
• Открытие модального окна или диалога с подтверждением действия и отправкой команды на сервер.
• Реализация кастомных кнопок над таблицей или в скрытом дополнительном меню (открывается через “звездочку”, там же, где выгрузка в Excel/JSON).

Вы можете кастомизировать таблицу практически как угодно, например, скрыв тело таблицы и оставив только функционал фильтров для отправки запросов на сбор аналитики и дальнейшей отрисовки графиков.

---

Как создать

Создание профайла

1. Вы можете не создавать отдельный профайл для таблицы, а использовать профайл класса.
2. Если нужны особые настройки, отличные от настроек класса, создайте Клиентский объект (см. раздел Создание Клиентских Объектов).

Размещение в интерфейсе

1. В основном меню

Необходимо создать пункт меню типа “Элемент” в редакторе меню (System -> Menu editor):

• Указать родительский элемент.
• Выбрать Класс.
• Опционально выбрать Клиентский объект (должен быть основан на том же классе).

Такой элемент появится в меню, и при его выборе будет открыта указанная таблица. Код писать не требуется.

2. Внутри формы или фрейма (в верстке)

В HTML-верстке формы или фрейма можно указать div с определенным классом и дата-атрибутами:

<div data-tbls="CLASS_NAME.TABLE_CO_NAME" class="fn-child-tbl-holder marTop10"></div>

• class: fn-child-tbl-holder
• data-tbls: "CLASS_NAME.TABLE_CO_NAME", где CLASS_NAME — имя класса, а TABLE_CO_NAME — имя клиентского объекта. Если клиентский объект не указан, атрибут выглядит так: "CLASS_NAME.".

3. Кодом в любой контейнер

Чтобы создать таблицу программно, нужно создать экземпляр MB.TableN и вызвать метод create, передав jQuery-контейнер.

Пример:

const req_holder = dashboard.parentBlock.find('.dbrd-requests-container');

const req_table = new MB.TableN({  
   name: 'Заявки',  
   client_object: 'table_request_work_dashboard',  
   class: 'request_work',  
   id: MB.Core.guid(),  
   parentObject: frameInstance,  
   parent: frameInstance,  
   parent_id: frameInstance.data.data.id,  
   destroy_on_reload: true,  
   externalWhere: []  
});

req_table.create(req_holder, function () {  
   // console.log('dashboard table rendered');  
});

Основные параметры:

• name: Для ориентации в коде и в массиве MB.Tables.tables.
• class и client_object: Указывают на Класс и Клиентский объект.
• id: Должен быть уникальным.
• parentObject, parent, parent_id: Если таблица встраивается в форму/фрейм, указание родителя и его ID позволяет таблице автоматически фильтровать данные (при настроенном parent_key в профайле).
• destroy_on_reload: Определяет, нужно ли уничтожать таблицу при перезагрузке родительского компонента.
• externalWhere: Массив дополнительных условий фильтрации.

---

JS-файл расширения функционала

При загрузке таблицы может быть исполнен JS-файл для расширения её функционала.

Условия подключения:

1. Файл должен находиться в public_src/html/tables/require/.
2. Имя файла должно совпадать с именем Клиентского объекта или (если он не указан) иметь вид table_<имя_класса>.
3. В профайле Клиентского объекта (или класса) должна быть установлена галочка “Additional functionality”.

В качестве шаблона можно использовать: public_src/html/tables/require/_gocore/table_example.js.

Контекстное меню

В файле расширения можно добавить пункты в массив tableInstance.ct_instance.ctxMenuData. Каждый элемент — это объект:

• name: Уникальное имя пункта.
• title: Отображаемое название.
• disable: Функция, возвращающая true, если пункт должен быть недоступен (например, в зависимости от данных строки).
• callback: Функция, исполняемая при клике.

Пример:

{  
   name: 'option2',  
   title: 'Другое',  
   disabled: function(){  
       return false;  
   },  
   callback: function(){  
       const row = tableInstance.ct_instance.selectedRowIndex;
       const dataRow = tableInstance.data.data[row];
       const id = dataRow.id;

       // Получение всех выбранных строк
       const selected = tableInstance.ct_instance.selection2.data;  
   }  
}

Другой функционал

Через инстанс таблицы можно получить доступ ко всем настройкам, данным и текущему состоянию (фильтры, текст поиска, текущая страница и т.д.). Изучить содержимое объекта можно в рантайме через консоль браузера: MB.Tables.tables.

Вы можете реализовывать любую логику, используя встроенные компоненты ядра, внешние библиотеки или даже встраивать приложения на React или других фреймворках.