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

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

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

{{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")
}}

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

{{flexberry-objectlistview
...
componentName="castomActionName"
}}

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

{{flexberry-objectlistview
...
componentName=castomActionName
}}

Список компонентов 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) включающий/выключающий отображение кнопок пользовательских настроек.

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

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

Настройка списков

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

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

Экспорт в Excel

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

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

{{flexberry-objectlistview
...
exportExcelButton=true

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

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

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

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

Для настройки одновременного удаления всех выделенных элементов списка нужно в контроллере прописать событие 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 . Если он выполнение будет прервано, то удаление выполнено не будет.

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

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

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

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

Ограничения списков

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

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

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

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

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

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

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

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