Используемые компоненты и настройки списков в приложениях с использованием технологии Flexberry Ember, экспорт, удаление элементов

Назначение компонента

Основное предназначение flexberry-ojectlistview – просмотр списка доступных объектов с возможностью их последующего открытия и редактирования (в контрол встроен пейджинг, позволяющий просматривать данные порционно).

Обзор возможностей и API компонента

Для добавления контрола на страницу можно воспользоваться шаблоном (ниже представлен шаблон для добавления на списковую форму):

{{flexberry-objectlistview
  componentName = "ordersObjectListView"
  modelController = this
  modelName = "order"
  modelProjection = modelProjection
  content = model

  createNewButton = true
  refreshButton = true
  defaultSortingButton = true
  showDeleteButtonInRow = true
  colsConfigButton = true

  sorting = computedSorting
  orderable = true
  sortByColumn = (action "sortByColumn")
  addColumnToSorting = (action "addColumnToSorting")
  action = "rowClick"

  pages = pages
  perPageValue = perPageValue
  perPageValues = perPageValues
  hasPreviousPage = hasPreviousPage
  hasNextPage = hasNextPage
  previousPage = (action "previousPage")
  gotoPage = (action "gotoPage")
  nextPage = (action "nextPage")
}}

Синтаксис вида addColumnToSorting=(action \"addColumnToSorting\") определяет, что используется ember closure action. Если требуемое действие не определено, то при вызове соответствующей функциональности в консоли браузера появится ошибка.

Если на форме используются дополнительные события, в шаблон может быть передано как имя события

{{flexberry-objectlistview
...
action="customActionName"
}}

так и собственно само событие:

{{flexberry-objectlistview
...
action=customActionName
}}

Список компонентов flexberry-ojectlistview

Наименование компонента	Краткое описание компонента
componentName	Имя компонента. Должно быть уникальное в пределах одной страницы.
modelController	Текущий контроллер страницы.
modelName	Имя текущей модели (список каких объектов отображается).
modelProjection	Текущее используемое представление.
content	Отображаемые в контроле данные.
createNewButton	Флаг, определяющий, отображать ли кнопку создания на панели управления.
refreshButton	Флаг, определяющий, отображать ли кнопку обновления на панели управления.
defaultSortingButton	Флаг, определяющий, отображать ли кнопку установки сортировки по умолчанию.
deleteButton	Флаг, определяющий, отображать ли кнопку удаления на панели управления.
showCheckBoxInRow	Флаг, определяющий, отображать ли чекбоксы для выделения записей в каждой строчке.
showDeleteButtonInRow	Флаг, определяющий, отображать ли кнопку удаления строки в каждой строчке.
showDeleteMenuItemInRow	Флаг, определяющий, отображать ли пункт контекстного, меню мобильного шаблона f-olv, “Удалить запись”.
showEditMenuItemInRow	Флаг, определяющий, отображать ли пункт контекстного, меню мобильного шаблона f-olv, “Редактировать запись”.
rowClickable	Флаг, определяющий, следует ли обрабатывать нажатие на строчку.
action	Действие, выполняемое при нажатии на строчку.
orderable	Флаг, определяющий, возможно ли производить сортировку по столбцам в компоненте.
sorting	Метод определения текущей сортировки.
sortByColumn	Действие (action) контроллера, которое должно быть выполнено для сортировки по столбцу.
addColumnToSorting	Действие (action) контроллера, которое должно быть выполнено для добавления сортировки по столбцу.
pages	Метод определения доступных страниц для отображения в пейджинге.
perPageValue	Метод определения текущей настройки, где указано, по сколько записей отображается на странице.
perPageValues	Массив, определяющий, по сколько записей на странице можно отображать.
hasPreviousPage	Флаг, определяющий, есть ли у текущей страницы предшествующая.
hasNextPage	Флаг, определяющий, есть ли у текущей страницы последующая.
previousPage	Метод для перехода на предыдущую страницу.
gotoPage	Метод для перехода на заданную страницу.
nextPage	Метод для перехода на следующую страницу.
editFormRoute	Задаёт имя роута формы редактирования, в котором будет открываться модель.
singleColumnHeaderTitle	Заголовок для мобильного представления компонента, вместо названий колонок. Если не задан или равен “”, то шапка таблицы в компоненте скрывается.
colsConfigButton	Флаг (true/false) включающий/выключающий отображение кнопок пользовательских настроек.
bottomPagination	Флаг, определяющий положение пагинации верху/снизу.

Значения по умолчанию:

action: 'rowClick',
createNewButton: false,
refreshButton: false,
defaultSortingButton: true,
orderable: false,
rowClickable: true,
showCheckBoxInRow: false,
showDeleteButtonInRow: false,
showDeleteMenuItemInRow: false,
showEditMenuItemInRow: true,
colsConfigButton: true,
bottomPagination: true

Настройки списка по умолчанию

Экспорт в Excel

Технология Ember Flexberry предоставляет возможность экспорта списков. Для того чтобы экспорт стал доступен в приложении, необходимо осуществить настройки на бекэнде.

В шаблоне непосредственно формы должно быть указано

{{flexberry-objectlistview
...
exportExcelButton=true

Настройки экспорта можно сохранять, задав наименование. Также можно изменять наименование столбцов для экспорта.

Удаление элементов списка

Для удаления элементов списка используется метод beforeDeleteRecord. Метод поддерживает асинхронный режим, то есть можно возвращать promise в качестве значения результата.

Удаление всех выделенных элементов

Для настройки одновременного удаления всех выделенных элементов списка, нужно в контроллере прописать событие beforeDeleteAllRecords:

import ListFormController from './list-form';

export default ListFormController.extend({
  actions: {
    beforeDeleteAllRecords(modelName, data) {
      if (modelName === 'application-user') {
        data.cancel = false;
      }
    }
  }
});

и указать его в шаблоне списка:

{{flexberry-objectlistview
  ...
  beforeDeleteAllRecords=(action 'beforeDeleteAllRecords')
  ...
}}

Проверка списков перед удалением элементов

При работе со списком есть возможность возвращать promise через return в теле обработчика beforeDeleteRecord, то есть можно реализовать асинхронную логику. Если сделать return < promise > – тогда операция удаления будет вызываться после того, как будет выполнен promise. Если его выполнение будет прервано, то удаление выполнено не будет.

Отображение ошибок списка

Если список содержит ошибки, то будет отображена форма с указанием ошибки:

• при загрузке списка с ошибкой в первый раз будет отображен шаблон error.hbs;
• в контроллере есть список ранее загруженных объектов – ошибка будет показана через компонент.

Изменить это на прикладном уровне можно с помощью метода onModelLoadingRejected в роуте.

Изменение ширины столбцов

Изменение ширины столбцов для списка и детейлов на форме редактирования осуществляется по общим принципам.

Для того чтобы включить/отключить изменение ширины столбцов, необходимо задать у контрола в шаблоне свойство allowColumnResize (для обычных приложений это свойство по умолчанию имеет значение true, для мобильных – false).

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

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

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

Сервис настроек пользователя

Если сервис настроек пользователя включён, то при загрузке спискового контрола вычитывается сохранённая настройка ширины столбцов, а при изменении ширины столбцов – настройка сохраняется.

Указание функции ограничения

Особенности настройки ограничений на списках описаны в статье Инструменты ограничения списка.

Пользовательские кнопки в тулбаре

Панель управления, как и кнопки в строках, может быть дополнена пользовательскими кнопками, реализующими необходимые прикладные функции для работы со списком. Подробнее описано в статье Настройки списков.