ViewGrid#

Контрол в виде таблицы в режиме просмотра. Аналогичен AnalyticalGrid, но разрабатывается средствами Лексемы.

Свойства#

adminCustomizable#

тип	значение по умолчанию	допустимые значения
bool	true	true/false

Включает режим настраиваемости грида для администратора

Включает режим настраиваемости грида (по аналогии со свойством customizable, но дополнительно сохраняются группировки строк) для администратора. Если свойство включено, то у администротора появлятеся кнопка сохранения состояния грида. Сохраненное состояние распространяется на всех пользователей. Собственные настройки пользователя являются более приоритетными.

allowUserToExportRows#

тип	значение по умолчанию	допустимые значения
bool	true	true/false

Свойство, отвечающее за возможность пользовательского экспорта строк в грид.

bind#

тип	значение по умолчанию	допустимые значения
string	-

Свойство, к которому биндится контрол

caption#

тип	значение по умолчанию	допустимые значения
string	-

Заголовок грида.

columnsVerticalAlign#

тип	значение по умолчанию	допустимые значения
string	'bottom'	bottom, middlem top

Задает выравнивание по вертикали заголовки колонок.

customizable#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Включает режим настраиваемости, управление набором колонок и сохранение состояния грида между сеансами.

dataSource#

тип	значение по умолчанию	допустимые значения
string	-	-

Источник данных грида. Свойство недоступно в шаблоне формы.

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

denyRoles#

Список ролей без прав на данный элемент.

Отнаследовано от Control

editorWidth#

Ширина контрола в колонках (для Bootstrap-верстки).

Отнаследовано от Control. По умолчанию значение 3

exportCaption#

тип	значение по умолчанию	допустимые значения
string	-	-

Устанавливает заголовок таблицы при экспорте грида в эксель.

enableDateExport#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Задает возможность экспорта текущей даты (доступно только для 8.4).

enableUserNameExport#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Задает возможность экспорта ФИО текущего пользователя (доступно только для 8.4).

filterable#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Возможность фильтрации.

groupable#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Возможность группировки.

groupsExpandedByDefault#

тип	значение по умолчанию	допустимые значения
bool	true	true/false

Настройка групп по умолчанию в развернутом состоянии.

В серверном режиме не учитывается, группы закрыты по умолчанию.

groupsLevelExpandedByDefault#

тип	значение по умолчанию	допустимые значения
int	null

Уровень вложенности группировок, которые по умолчанию будут в развернутом состоянии.

Используется, когда groupsExpandedByDefault = true. В серверном режиме не учитывается, группы закрыты по умолчанию.

id#

Идентификатор контрола.

Отнаследовано от Control.

height#

Высота контрола.

Отнаследовано от Control. Значение по умолчанию 400px. Можно задавать в пикселях (px), либо авто высоту (значение auto).

hideBorders#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Позволяет скрыть/отобразить границы.

hideColumnsHeader#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Позволяет скрыть/отобразить заголовки колонок.

pageSize#

тип	значение по умолчанию	допустимые значения
int	20

Количество строк в одной странице при постраничной загрузке данных (только в серверном режиме).

pagesOutOfRange#

тип	значение по умолчанию	допустимые значения
int	2

Количество страниц по краям от видимого интервала при постраничной загрузке данных (только в серверном режиме).

primaryKeyName#

тип	значение по умолчанию	допустимые значения
string	VCode

Имя первичного ключа. Используется вместе со свойством viewName.

readRoles#

Список ролей на чтение данных.

Отнаследовано от Control

rowsHeight#

тип	значение по умолчанию	допустимые значения
string	-	-

Высота строк.

По умолчанию высота берется из темы. Можно задавать в пикселях (px), либо авто высоту (значение auto).

selectionMode#

тип	значение по умолчанию	допустимые значения
string	checkbox	checkbox, none

Режим выделения.

По умолчанию значение checkbox. Доступные значения: checkbox, none.

serverSource#

тип	значение по умолчанию	допустимые значения
import-default	-

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

sortable#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Возможность сортировки.

sortingMode#

тип	значение по умолчанию	допустимые значения
string	single	single, multiple

Режим сортировки.

single - сортировка по одной колонке,
multiple - сортировка по нескольким колонкам.

columnsReorder#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Возможность изменения порядка колонок пользователем.

columnsResize#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Возможность изменения ширины колонок грида пользователем.

showAggregates#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Возможность отображения итоговых полей.

showFilterRow#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Отображение полей фильтрации.

showFilterMenu#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Отображение меню фильтрации для каждой колонки.

Приоритет у настройки showFilterRow.

showGridInfo#

тип	значение по умолчанию	допустимые значения
bool	true	true/false

Отображение информации о выделенных, отфильтрованных строках.

toolbarVisible#

тип	значение по умолчанию	допустимые значения
bool	true	true/false

Отображение тулбара грида.

viewName#

тип	значение по умолчанию	допустимые значения
string	-	-

Имя экранной формы. Используется для создания ссылок для документа.

visible#

тип	значение по умолчанию	допустимые значения
bool	true	true/false

Видимость контрола.

width#

Ширина контрола.

Отнаследовано от Control. Можно задавать в пикселях (px), либо в процентах (%).

wordWrapEnabled#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Позволяет включить/выключить перенос слов.

writeRoles#

Список ролей на изменение данных.

Отнаследовано от Control

kanban#

Возвращает ссылку на экземпляр канбана, связанного с гридом. Свойство доступно только программно.

Методы#

addColumns#

Динамически добавляет колонки и элементы иерархии колонок.

Принимает массив, в котором содержаться объекты, описывающие добавляемые элементы. Объекты обладают следующими свойствами:

Ctor - конструктор добавляемого элемента. Список допустимых конструкторов:
- ViewGridColumn
- ViewGridColumnGroup
- ViewGridObjectColumn
- ViewGridColumnField
properties - свойства добавляемого элемента. Кроме свойств, описанных в разделах статьи, посвященных конкретным элементам, можно указать следующие свойства:
- columnGroup - название группы в которую следует добавить колонку. Если данной группы не существует, то она создаться в корне иерархии.
- dataField - для ViewGridObjectColumn можно указать dataField объектной колонки, в которую следует добавить описываемый элемент.
items - дочерние элементы. Может содержать описание итоговых полей, описание дочерних колонок (для групп колонок и объектных колонок).
- Итоговое поле описывается объектом со свойствами:
  - Ctor - конструктор итогового поля ViewGridColumnAggregate.
  - properties - свойства добавляемого итогового поля.
- описание дочерних колонок идентично описанию колонки из корневого массива данного метода.

Пример - Добавление колонки с агрегатами

this.controls.grid1.addColumns([{
    Ctor: ViewGridColumn,
    properties: {
        dataField: 'value',
        text: 'Dynamic Value',
        width: '100px',
        pinned: true
    },
    items: [{
        Ctor: ViewGridColumnAggregate,
        properties: {
            type: 'sum'
        },
        {
        Ctor: ViewGridColumnAggregate,
        properties: {
            type: 'count'
        },
    }]
}]}

Пример - Добавление группы колонок с заданными колонками внутри

this.controls.grid1.addColumns([{
    Ctor: ViewGridColumnGroup,
    properties: {
        text: 'dynamicgroup1',
        align: 'center',
        pinned: false,
        name: 'dynamicgroup1'
    },
    items: [{
        Ctor: ViewGridColumn,
        properties: {
            dataField: 'id',
            width: '150px',
            type: 'string',
            cellsAlign: 'center',
            align: 'right',
            text: 'id~'
        },
        {
        Ctor: ViewGridColumn,
        properties: {
            dataField: 'name',
            width: '100px'
        },
    }]
}]}

addFilters#

Устанавливает фильтры по указанным колонкам.

Пример

this.controls.viewGrid.addFilters([{
    dataField: 'column1',
    value: 'value'
}, {
    dataField: 'column2',
    objectField: 'field1',
    value: 'value'
}])

addGrouping#

Добавляет группировку по колонке в конец списка.

Первым параметром принимает объект со свойствами:

dataField - dataField колонки
objectField - objectField колонки (для объектной колонки)

Вторым параметром принимает индекс группы.

addGroupingSet#

Добавляет набор группировок в конец списка.

Первым параметром принимает массив, в котором содержаться объекты со свойствами:

dataField - dataField колонки
objectField - objectField колонки (для объектной колонки)

Вторым параметром принимает индекс группы.

addSorting#

Добавляет сортировку по колонкам.

Принимает массив объектов со свойствами:

dataField - dataField колонки
objectField - objectField колонки (для объектной колонки)
order - задает порядок сортировки. Доступные значения: asc, desc

beginUpdate#

Информирует грид о начале процесса изменения его свойств (ускоряет работу при выполнении нескольких операций).

clearFilters#

Очищает все фильтры.

clearGrouping#

Убирает все установленные группировки.

clearSelection#

Снимает выделение со всех строк.

1	`clearSelection().`

clearSorting#

Очищает все сортировки.

collapseAllGroups#

Скрывает все группы строк.

Если корневая группа была скрыта, то вложенные в нее группы не будут скрываться.

Внимание

Не поддерживается в серверном режиме.

collapseGroup#

Скрывает группу строк.

Первым параметром принимает путь до целевой группы. Указывается в формате '0.0.0'. Числом является индекс группы (индекс зависит от примененной сортировки и фильтров), точкой разделяется уровень вложенности группы. Вторым параметром принимает объект с дополнительными опциями. Доступные опции: collapseSubGroups - позволяет скрывать вложенные группы.

В серверном режиме путь указывается в виде массива объектов { dataField, objectField, name }.

dataField колонки.
objectField колонки.
name - название группы (значение, по которому проведена группировка).

endUpdate#

Информирует грид об окончании процесса изменения его свойств

ensureRowVisible#

Устанавливает положение скролла, что бы строка попала в область видимости.

Пример

const rowData = this.controls.viewGrid.dataSource()[4]
this.controls.viewGrid.ensureRowVisible(rowData)

Внимание

Не поддерживается в серверном режиме.

expandAllGroups#

Раскрывает все группы строк.

Если корневая группа была раскрыта, то вложенные в нее группы не будут раскрываться.

Внимание

Не поддерживается в серверном режиме.

expandGroup#

Раскрывает группу строк.

Первым параметром принимает путь до целевой группы. Указывается в формате '0.0.0'. Числом является индекс группы (индекс зависит от примененной сортировки и фильтров), точкой разделяется уровень вложенности группы. Вторым параметром принимает объект с дополнительными опциями. Доступные опции: expandSubGroups - позволяет раскрывать вложенные группы.

В серверном режиме путь указывается в виде массива объектов { dataField, objectField, name }.

dataField колонки.
objectField колонки.
name - название группы (значение, по которому проведена группировка).

exportToExcel#

Экспортирует данные в новый файл .xlsx.

Файл загрузится автоматически.

Пример

this.controls.viewGrid.exportToExcel('doc.xlsx') // doc.xlsx - имя файла

Поведение при выделении строк:

если выделение строк применено, то экспортируются выделенные строки
если выделение строк применено, экспортируются все видимые строки

Внимание

В серверном режиме для работы функции необходим сервис ecosoft-lexema8-excel-service.

getFilters#

Возвращает фильтры по колонкам.

Пример возвращаемого значения:

Пример

[{ dataField: 'column1', value: 'value' }, { dataField: 'column2', objectField: 'field1', value: 'value' }]

getFilteredObjects#

Возвращает массив записей набора данных, получающийся в результате применения фильтров. Не работает в serverViewGrid

Пример

myForm.js

console.log(this.controls.grid1.getFilteredObjects())

getGroup#

Возвращает описание группы строк.

Работает только с группами самого верхнего уровня. Возвращает null, если группа не найдена. Метод принимает индекс группы (индекс зависит от примененной сортировки и фильтров).

getGrouping#

Возвращает массив текущих группировок.

getRootGroupsCount#

Возвращает количество сгруппированных строк верхнего уровня.

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

getRowByPk#

Возвращает Promise, результатом которого будет строка с переданным значением уникального идентификатора.

Принимает два параметра:

propertyName - наименование свойства уникального идентификатора данных.
value - значение идентификатора строки.

Внимание

Не поддерживается в серверном режиме.

getSelectedObjects#

Возвращает массив observable-объектов с данными, привязанными к выделенным строкам грида.

В серверном режиме возвращает значения первичных ключей модели выделенных строк.

getSorting#

Возвращает установленную на текущий момент сортировку.

Результат возвращается в виде массива объектов со свойствами:

dataField - dataField колонки
objectField - objectField колонки (для объектной колонки)
order - установленный порядок сортировки. Доступные значения: asc, desc

reloadData#

Вызывает принудительную перезагрузку данных серверного грида. (только в серверном режиме).

Примечание

такая перезагрузка сбросит прокрутку скролла к началу закроет открытые группы если они были.

removeAllColumnGroups#

Удаляет все группы колонок.

removeAllColumns#

Удаляет все колонки.

Примечание

группы колонок не удаляются.

removeColumn#

Удаляет колонку. Принимает два параметра:

dataField колонки
objectField колонки (для объектной колонки)

Пример

this.controls.viewGrid.removeColumn('VCode') // удаляет колонку 'VCode'
this.controls.viewGrid.removeColumn('Employee', 'Name') // удаляет ViewGridColumnField колонку 'Name' у объектной колонки Employee

removeColumnGroup#

Удаляет группу по имени.

Пример

this.controls.viewGrid.removeColumnGroup('group1')

removeFilters#

Удаляет фильтры с указанных колонок.

Пример

this.controls.viewGrid.removeFilters([{ dataField: 'column1' }, { dataField: 'column2', objectField: 'field1' }])

removeGrouping#

Удаляет группировку по колонке.

принимает объект со свойствами:

dataField - dataField колонки
objectField - objectField колонки (для объектной колонки)

removeSorting#

Удаляет сортировки.

Принимает массив объектов со свойствами:

dataField - dataField колонки
objectField - objectField колонки (для объектной колонки)

selectRows#

Выделяет строки.

Принимает массив строк источника данных грида.

setDateState#

Устанавливает ограничение по периоду для загрузки данных. (только в серверном режиме)

Принимает объект со следующими свойствами:

bDate - дата начала периода.
eDate - дата окончания периода.

unselectRows#

Снимает выделение строк.

Принимает массив строк источника данных грида.

setCustomizableColumns#

Задает режим настраиваемости для колонок, которые были добавлены динамически.

таблица

параметр	тип	описание
columns	[object]	Массив колонок. Содержит объекты со свойстввами: dataField - dataField колонки, ojectField - objectField колонки (задается только для колонки ViewGridColumnField)

Пример

    // колонки { dataField: 'c3' }, { dataField: 'c4', objectField: 'f4' } должны быть добалены динамически до вызова этого метода
    this.controls.grid.setCustomizableColumns([{ dataField: 'c3' }, { dataField: 'c4', objectField: 'f4' } ])

События#

selectedRowsChanged#

Срабатывает при выделениии или снятии выделения со сторк.

Метод clearSelection не вызывает это событие.

Обработчик принимает два параметра:

selectedRowsChanged(s, e)

параметр	тип	описание
s	object	ссылка на экземпляр грида
e	object	объект с параметрами
e.selectedRows	number	массив с данными, привязанные к выделенным строкам.
e.unselectedRows	string	массив с данными, привязанные к строкам, с которых сняли выделение

Примечание

В серверном режиме массив содержит значения первичных ключей модели.

cellClicked#

Нажатие на ячейку.

Работает аналогично cellClicked из контрола Table, но в объект с параметрами входит поле objectField, если событие сработало на колонку поле.

grouped#

Срабатывает при изменении группировки.

Входные параметры обработчика:

grouped(s, e)

параметр	тип	описание
s	object	ссылка на экземпляр грида
e	object	объект, содержащий информацию о группировке
e.type	string	тип изменения. Принимаемые значения: add, remove, replace (изменен порядок)
e.index	string	индекс задействованной группировки
e.groupings	string	массив, который содержит информацию о колонках, по которым осуществлена группировка. Свойства объектов массива: dataField, objectField (используется для колоки ViewGridColumnField)

filtered#

Срабатывает при изменении при изменении фильтров.

Входные параметры обработчика:

filtered(s, e)

параметр	тип	описание
s	object	ссылка на экземпляр грида
e	object	массив, содержащий информацию о коллекции текущих фильтров

Коллбэки#

cellPainter#

Позволяет раскрасить ячейку таблицы.

Работает аналогично cellPainter в Table, но в объект с параметрами входит поле objectField, если событие сработало на колонку поле (ViewGridColumnField).

linkRenderer#

Позволяет задать сслыку для ячеек грида.

Входные параметры коллбэка:

linkRenderer(s, e)

параметр	тип	описание
s	object	ссылка на экземпляр грида
e	object	объект, содержащий информацию ячейке
e.rowIndex	number	индекс строки
e.dataField	string	идентификатор колонки
e.objectField	object	идентификатор поля объектной колонки. undefined в случае клика на ячейку обычно колонки
e.rowData	object	данные строки из оригинального dataSource

Для формирования ссылки обработчик должен вернуть объект следующей структуры:

url - адрес ссылки.
text - текст ссылки.
target - аттрибут ссылки, отвечающий за то, в какой вкладке открыть ссылку. Значение по умолчанию "_self". Принимает параметры аналогичные HTML свойству target элемента link(<a>), выполняет те же функции.

exportCellsFormatter#

срабатывает при экспорте грида в Excel, служит для определения стилей ячеек

exportCellsFormatter(args)

параметр	тип	описание
args	object	данные об экспортируемой ячейке
args.value	object	значения ячейки
args.datafield	string	датафилд колонки
args.rowData	object	объект-строка данных грида

Возвращаемое значение обработчика:

объект, содержащий информацию о стиле ячейки:
- fontColor - цвет шрифта в формате ARGB( к примеру 'FFFF0000' - красный цвет)
- fgColor - цвет заливки в формате ARGB( к примеру 'FFFF0000' - красный цвет)
- blocked - флаг, показывающий, нужно ли запретить редактирование ячейки

Внимание

Не поддерживается в серверном режиме.

exportGroupsFormatter#

срабатывает при экспорте грида в Excel, служит для определения стилей групп ячеек

exportGroupsFormatter(args)

параметр	тип	описание
args	object	данные об экспортируемой ячейке
args.value	object	значения ячейки
args.datafield	string	датафилд колонки
args.depth	number	глубина вложенности группы
args.count	number	количество вложенных элементов

Возвращаемое значение обработчика:

объект, содержащий информацию о стиле ячейки:
- fontColor - цвет шрифта в формате ARGB( к примеру 'FFFF0000' - красный цвет)
- fgColor - цвет заливки в формате ARGB( к примеру 'FFFF0000' - красный цвет)
- blocked - флаг, показывающий, нужно ли запретить редактирование ячейки

Внимание

Не поддерживается в серверном режиме.

sortDefiner#

позволяет задать сортировку для грида.

Должен вернуть массив из одного объекта (при sortingMode single) или нескольких объектов (при sortingMode multiple) со свойствами:

dataField - dataField колонки
objectField - objectField колонки (для объектной колонки)
order - задает порядок сортировки. Доступные значения: asc, desc

Контролы#

Колонки в таблице строятся из следующих контролов:

ViewGridColumn - колонка примитивного типа
ViewGridColumnAggregate - итоговое поле
ViewGridColumnField - колонка "объектное поле" для примитивного типа
ViewGridColumnGroup - группа колонок
ViewGridObjectColumn - колонка "объектное поле" для свойства-объекта

Различия с Grid #

Различия в свойствах

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

Различия функционала

Не редактируемый
Нет отложенного создания

Различия в методах

addColumns - теперь нужно передавать конструктор колонки (или группы) в параметре объекта Ctor (связанно с тем, что видов колонок теперь несколько). Динамическое добавление колонок теперь работает через этот метод.
getSorting - возвращает массив объектов вместо объекта (из-за возможности множественной сортировки). В свойстве order объекта значений ascending descending - asc и desc

Различия в событиях

grouped - нет типов изменения insert и clear. Добавлен тип replace
cellPainter - изменены свойства в объекте e (вместо row - rowIndex, вместо data - rowData, вместо value - cellValue, вместо column - dataField)

Отсутствующие свойства

captionWidth - устаревшее
statusBarHeight - устаревшее
hint - устаревшее

Отсутствующие методы

render (перерисовка автоматически срабатывает при необходимости)
unselectRow - существует метод unselectRows
getIndexByData - устаревшее
addFilter - существует метод addFilters
addColumnGroup - группы добавляются через метод addColumns

Отсутствующие события

cellDoubleClicked - избыточное в данной реализации, предлагается использовать вместо него - cellClicked
cellSelected - избыточное в данной реализации, предлагается использовать вместо него - cellClicked
rowSelected - избыточное в данной реализации, предлагается использовать вместо него - selectedRowsChanged
rowUnselected - избыточное в данной реализации, предлагается использовать вместо него - selectedRowsChanged
cellSelected - избыточное в данной реализации, предлагается использовать вместо него - cellClicked
rowClicked - избыточное в данной реализации, предлагается использовать вместо него - cellClicked
rowDoubleClicked - избыточное в данной реализации, предлагается использовать вместо него - cellClicked

Различия в суммовых полях

нет свойства format - форматирование берется из свойства format колонки, для которой заданы суммовые поля

Серверный режим работы#

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

Отличия работы в серверном режиме#

Свойства:

dataSource - возвращаемое значение. Возвращает модель на которой работает источник данных.
groupsExpandedByDefault, groupsLevelExpandedByDefault - свойства не учитываются. Группы в серверном режиме закрыты по умолчанию.
pageSize, pagesOutOfRange - свойства для настройки количества данных, загружаемых на клиент.
serverSource - новое свойство.

Методы:

getSelectedObjects - возвращаемые значения. Возвращает значения первичных ключей модели выделенных строк.
getRowByPk, collapseAllGroups, expandAllGroups, ensureRowVisible - методы не поддерживаются.
getRootGroupsCount - метод возвращает Promise.
collapseGroup, expandGroup - изменен формат пути для раскрытия группы.
exportToExcel - для работы требуется сервис ecosoft-lexema8-excel-service.
setDateState, reloadData - новые методы.
getFilteredObjects - не работает в серверном режиме.