Основное предназначение 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")
}}
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 ) включающий/выключающий отображение кнопок пользовательских настроек. |
Значения по умолчанию:
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ервис настроек пользователя включён, то при загрузке спискового контрола вычитывается сохранённая настройка ширины столбцов, а при изменении ширины столбцов - настройка сохраняется.