Перейти к содержанию

Grid#

Пример отображения

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

Свойства#

adminCustomizable#

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

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

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

allowUserToAddRows#

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

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

Перекрывает свойство readOnly.

allowUserToDeleteRows#

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

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

Перекрывает свойство readOnly.

allowUserToExportRows#

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

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

autoHeight#

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

Настройка автовысоты грида.

bind#

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

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

buttonAddVisible#

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

Отображение кнопки добавить строку

buttonDeleteVisible#

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

Отображение кнопки удалить строку

caption#

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

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

captionWidth#

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

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

columnsHeight#

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

Высота заголовка колонок.

columnsReorder#

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

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

columnsResize#

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

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

customizable#

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

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

dataSource#

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

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

deferredCreating#

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

Отложенное создание грида

Подробнее о свойстве ниже в этой статье.

denyRoles#

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

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

detailed#

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

Флаг отображения детализация строк.

При установке данному свойству значение true будет отображаться детализация строк. В качестве детализации отображается грид с дочерней коллекцией данной строки.

editMode#

тип значение по умолчанию допустимые значения
string selectedcell selectedcell, click, selectedrow, dblclick, programmatic

Режим редактирования.

Подробнее Настройка режима редактирования.

editorWidth#

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

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

enableDateExport#

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

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

enableUserNameExport#

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

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

exportCaption#

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

Свойство, устанавливающее заголовок таблицы при экспорте грида в Excel.

exportGroupWidth#

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

Ширина колонки в файле excel, получаемой при выгрузке данных с учетом группировки строк.

filterable#

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

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

groupable#

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

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

groupsExpandedByDefault#

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

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

Пример отображения

groupsExpandedByDefault = true

groupsExpandedByDefault = false

groupsLevelExpandedByDefault#

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

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

Примечание

Используется, когда groupsExpandedByDefault = true.

Пример отображения

groupsLevelExpandedByDefault = 0

height#

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

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

hideHorizontalBorders#

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

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

hideVerticalBorders#

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

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

id#

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

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

readOnly#

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

Режим "только для чтения".

readRoles#

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

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

rowsHeight#

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

Высота строк. По умолчанию высота берется из темы.

selectionMode#

тип значение по умолчанию допустимые значения
string singlerow none, singlecell, multiplecells, multiplecellsextended, multiplecellsadvanced, singlerow, multiplerows, multiplerowsextended, multiplerowsadvanced, checkbox, standard

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

Подробнее в примере.

showAggregates#

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

Отображение суммовых полей.

showButtonText#

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

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

showFilterMenuItems#

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

Включить/выключить возможность вызывать окно с настройками фильтров.

окно

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

showGridInfo#

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

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

showStatusBar#

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

Отображение поля для суммовых полей.

sortable#

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

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

sortColumn#

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

Колонка для сортировки по умолчанию.

sortDirection#

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

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

Доступные значения:

  • asc(по возрастанию),
  • desc(по убыванию).

statusBarHeight#

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

Высота суммовых полей.

tags#

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

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

toolbarVisible#

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

Отображение кнопок грида.

visible#

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

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

width#

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

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

wordWrapEnabled#

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

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

writeRoles#

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

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

Методы#

focus#

Устанавливает фокус на контрол

beginUpdate#

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

Решение

Ускоряет работу при выполнении нескольких операций.

endUpdate#

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

Пример 
1
2
3
4
5
this.controls.grid1.beginUpdate()
this.controls.grid1.width = '50%'
...
this.controls.grid1.columns.c15.text = 'c15 test'
this.controls.grid1.endUpdate()

render#

Вызывает перерисовку всех элементов грида.

Перерисовывает колонки, строки, ячейки и т.д., включая навигационные ссылки

Пример 
1
this.controls.grid1.render()

getSelectedObjects#

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

Пример 
1
2
3
var grid = lx.view.grid1;
console.log(grid.getSelectedObjects());            //вернет массив observable-объектов
var vCode = grid.getSelectedObjects()[0].VCode();  //получаем VCode из полученных данных

clearSelection#

Снимает все выделенные строки/ячейки

Пример 
1
this.controls.grid1.clearSelection()

create#

Выполняет создание контрола.

Используется для отложенного создания грида (свойство deferredCreating=true).

Примечание

Повторный вызов метода после создания игнорируется

Пример 
1
this.controls.grid1.create()

selectRow#

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

Предупреждение

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

параметр тип описание
index number индекс строки
Пример 
1
this.controls.grid1.selectRow(0)

unselectRow#

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

Предупреждение

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

параметр тип описание
index number индекс строки
Пример 
1
this.controls.grid1.unselectRow(0)

getIndexByData#

Возвращает массив индексов строк, удовлетворяющих переданному селектору.

параметр тип описание
obj object объект-селектор с параметрами
Пример 
1
2
3
var grid = lx.view.grid1;
console.log(grid.getIndexByData({'VCode': 1}));    //вернет массив индексов строк, VCode которых равен 1
console.log(grid.getIndexByData({'Name': 'qwe'})); //вернет массив индексов строк, в поле Name которых встречается строка 'qwe'

getGrouping#

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

Пример 
1
2
const originalGroupings = this.controls.grid1.getGrouping()
console.log(originalGroupings)

addGrouping#

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

параметр тип описание
datafield string имя колонки
index number индекс строки
Пример 
1
this.controls.grid1.addGrouping('nameGroup')

addGroupingSet#

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

параметр тип описание
datafield [string] имя колонки
index number индекс строки
Пример 
1
this.controls.grid1.addGroupingSet(['Count', 'Name', 'ShortName'])

removeGrouping#

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

параметр тип описание
datafield string имя колонки
Пример 
1
this.controls.grid1.removeGrouping({ dataField: 'Count' })

clearGrouping#

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

Примеры группировок 
1
2
3
4
5
6
grid.addGrouping(grid.columns.Column1.datafield);            //добавление группировки по колонке
grid.addGrouping(grid.columns.Column2.datafield, 0);         //добавление группировки по колонке в начало списка
grid.removeGrouping(grid.columns.Column1.datafield);         //получаем VCode из полученных данных
grid.addGroupingSet([grid.columns.Column1.datafield,grid.columns.Column1.datafiel2, ...]);            //добавление набора группировок
grid.addGroupingSet([grid.columns.Column1.datafield,grid.columns.Column1.datafiel2, ...], 0);         //добавление набора группировок в начало списка
grid.clearGrouping()

getFilters#

Возвращает установленный фильтр

Пример 
1
console.log(this.controls.grid1.getFilters())

getFilteredObjects#

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

Пример 
1
console.log(this.controls.grid1.getFilteredObjects())

addFilter#

Добавляет фильтрацию

параметр тип описание
datafield string имя колонки
value string значение фильтра

removeFilter#

Удаляет фильтрацию

clearFilters#

Убирает все фильтры у грида

Примеры фильтрации 
1
2
3
4
5
grid.addFilter('Name', 'Text');    //добавление фильтр колонке со свойством datafield = 'Name'
grid.removeFilter('Name');         //удаляет фильтр у колонки со свойством datafield = 'Name'
grid.getFilters();                 //получение установленных фильтров
grid.addFilters([{datafield:'VCode', value:1},{datafield:'Name', value:'Text'}]);  
grid.clearFilters();

getSorting#

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

addSorting#

Добавляет сортировку по колонке (по умолчанию в порядке возрастания)

параметр тип описание
item object объект со свойствами
item.datafield object поле данных столбца
item.order object порядок сортировки

removeSorting#

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

Примечание

Примечание: Возможна сортировка только по 1 колонке. Добавление новой сортировки удаляет предыдущую.

Примеры сортировки 
1
2
3
4
5
6
7
8
grid.addSorting({                                 //добавление сортировки по колонке в порядке возрастания
  datafield: grid.columns.Column1.datafield
});                                            
grid.addSorting({                                 //добавление сортировки по колонке в порядке убывания
  datafield: grid.columns.Column1.datafield,
  order: 'desc'
}); 
grid.removeSorting();

getGroup#

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

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

параметр тип описание
index number string
Пример 
1
console.log(this.controls.grid1.getGroup(1))

getRootGroupsCount#

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

Пример 
1
console.log(this.controls.grid1.getRootGroupsCount())

collapseGroup#

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

параметр тип описание
path string Путь до целевой группы. Указывается в формате '0.0.0'. Числом является индекс группы (индекс зависит от примененной точкой разделяется уровень вложенности группы.)
options object дополнительные опции
options.collapseSubGroups boolean Скрывать вложенные группы. Если целевая группа уже скрыта, то эта опция игнорируется.

expandGroup#

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

параметр тип описание
path string Путь до целевой группы. Указывается в формате '0.0.0'. Числом является индекс группы (индекс зависит от примененной точкой разделяется уровень вложенности группы.)
options object дополнительные опции
options.expandSubGroups boolean Раскрывать вложенные группы. Если целевая группа уже раскрыта, то эта опция игнорируется.

collapseAllGroups#

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

Примечание

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

expandAllGroups#

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

Примечание

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

setCustomizableColumns#

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

параметр тип описание
columns [string] Массив имен колонок (datafield колонки)
Пример 
1
2
    // колонки 'c4' и 'с5' должны быть добалены динамически до вызова этого метода
    this.controls.grid.setCustomizableColumns(['c4', 'c5'])

showRowDetails#

Раскрывает вложенную таблицу (метод используется, когда detailed = true)

параметр тип описание
rowIndex number Индекс строки в источнике данных

hideRowDetails#

Скрывает вложенную таблицу (метод используется, когда detailed = true)

параметр тип описание
rowIndex number Индекс строки в источнике данных

setScrollPosition#

Задает положение скролла по горизонтали и вертикали

параметр тип описание
options object объект со свойствами
options.top number положение скролла по вертикали
options.left number положение скролла по горизонтали
Пример 
1
this.controls.grid1.setScrollPosition({ top: 100, left: 100 })

getScrollPosition#

Возвращает положение скролла по горизонтали и вертикали

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

параметр тип описание
value object объект со свойствами
value.top number положение скролла по вертикали
value.left object положение скролла по горизонтали
Пример 
1
console.log(this.controls.grid1.getScrollPosition())

Работа с колонками#

Пример добавления в xml 
1
2
3
4
5
6
7
8
<Grid id="grid1" caption="grid1" editorWidth="12" readOnly="false" height="500px" width="100%">
  <Column datafield='column1' text='column1' width="150">
    <TextBox/>
    </Column>
  <Column datafield='column2' text='column2' width="150">
    <TextBox/>
  </Column>
</Grid>

Свойства колонок#

dataField#
тип значение по умолчанию допустимые значения обязательное
[string] - да

Задает имя свойства для биндинга (обязательное свойство). Должно быть уникальным в рамках одного грида. По значению этого свойство можно обращаться к объектной модели колонки.

1
2
  //свойство доступно только для чтения
  grid.columns.column1.datafield
text#

Задает заголовок колонки

1
  grid.columns.column1.text = 'text'
width#

Задает ширину колонки. Значение можно указывать в пикселях(px) или процентах(%).

1
  grid.columns.column1.width = '25%'
aggregateType#
тип значение по умолчанию допустимые значения
string none none, sum, avg, min, max, count

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

hint#

всплывающая подсказка, которая появляется при наведении на ячейки колонки

hintLength#

максимальное количество символов для всплывающей подсказки

align#

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

Доступные значения:

  • left
  • right
  • center
1
  grid.columns.column1.align = 'left'
cellsalign#

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

Доступные значения:

  • left
  • right
  • center
1
  grid.columns.column1.cellsalign = 'left'
pinned#

Делает колонку заблокированной от прокрутки по горизонтали.

1
  grid.columns.column1.pinned = true
editable#

Задает возможность редактировать колонку.

1
  grid.columns.column1.editable = false
columngroup#

Задает имя группы, в которую помещается колонка.

1
  grid.columns.column1.columngroup = 'group1'
visible#

Задает видимость колонки. Значение по умолчанию - true

1
  grid.columns.column1.visible = false
visibilityCustomizable#
тип значение по умолчанию допустимые значения
bool true true, false

Позволяет включить\выключить возможность настраивать видимость колонки пользователем.

groupingIndex#

Задает индекс группировки, начиная с 0. Свойство недоступно в объектной модели колонки

cellsformat#

Задает формат ячейки. Перекрывает свойства symbol и decimalDigits при использовании в качестве эдитора контрола NumberInput.

  • числовые форматы:
    • Dx - десятичный, где x - количество знаков после запятой, число от 1 и больше.
    • Fx - с плавающей точкой, где x - количество знаков после запятой, число от 1 и больше.
    • Px - процент, где x - количество знаков после запятой, число от 1 и больше.
    • N - целочисленный.
  • формат даты
index#

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

1
  grid.columns.column1.index = 1

При задании индекса колонки необходимо учитывать, что режим выделения checkbox и группировка строк добавляют дополнительные колонки в грид, от которых зависит индекс первой колонки. Например, по умолчанию индекс первой колонки равен 0, а в режиме выделения чекбокс индекс первой колонки будет равен 1. В этом случае, если колонке задать индекс = 0, то грид будет отображаться некорректно, т.к. колонка с чекбоксами сместится вправо.

Динамическое добавление колонок#
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import { TextBox } from 'ecosoft-lexema8'
......
grid1.addColumns([{
    properties: {
    datafield: 'Text1',
    text: 'Текст1',
    width: '100',    
    columngroup: 'gr3'
    },
  items:[{Ctor:TextBox}]
  },{
    properties: {
    datafield: 'Text2',
    text: 'Текст2',
    width: '100',   
    columngroup: 'gr2'
    },
    items:[{Ctor:TextBox}]
  }
]);
Удаление колонок#

Метод removeColumn удаляет колонку по имени (по datafield).

1
grid1.removeColumn('VCode');

Метод removeAllColumns удаляет все колонки.

1
grid1.removeAllColumns();

Работа с группами колонок#

Пример добавления в xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
...
<Grid id="grid1" caption="grid1" editorWidth="12" readOnly="false" height="500px" width="100%">
  <ColumnGroup name="group1" text='group1'>
    <Column datafield='column1' text='column1' width="150">
      <TextBox/>     
    </Column> 
    <ColumnGroup name="group1" text='group1'> 
      <Column datafield='column2' text='column2' width="150">
          <TextBox/> 
      <Column> 
    </ColumnGroup>           
  </ColumnGroup>
</Grid>
...

Свойства#

name#

Имя группы (обязательное свойство). По этому имени можно обращаться к объектной модели группы. Должно быть уникальным в рамках одного грида.

1
2
  //свойство доступно только для чтения
  grid.columnGroups.group1.name
text#

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

1
  grid.columnGroups.group1.text= 'text'
align#

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

Доступные значения:

  • left
  • right
  • center
1
  grid.columnGroups.group1.align= 'left'
parentgroup#

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

1
  grid.columnGroups.group1.parentgroup = 'parentGroup'

Динамическое добавление групп#

Для динамического добавления новых групп существует метод грида addColumnGroup. Он принимает массив объектов с описаниями групп:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
grid.addColumnGroup([
  { 
    text: 'group1', 
    align: 'center', 
    name: 'group1' 
  },
  {
    text: 'group2', 
    align: 'center', 
    name: 'group2', 
    parentgroup:'group1'
  }             
]);

Удаление группы#

Метод removeColumnGroup удаляет группу по имени группы

1
grid1.removeColumnGroup('gr1');

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

1
grid1.removeAllColumnGroups();

События#

cellClicked#

Срабатывает при клике по ячейке.

1
cellClicked(e)
параметр тип описание
e object ссылка на экземпляр грида
Пример 
1
    <Grid ... cellClicked="gridCellClicked" />

1
2
3
4
gridCellClicked (e) {
  console.log('gridCellClicked')
  console.log(e)
}

cellDoubleClicked#

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

параметр тип описание
e object ссылка на экземпляр грида
Пример 
1
    <Grid ... cellDoubleClicked="cellDoubleClicked" />

1
2
3
4
cellDoubleClicked (e) {
  console.log('cellDoubleClicked')
  console.log(e)
}

cellOpener#

Срабатывает перед редактированием ячейки.

Запрещает или разрешает редактирование ячейки в зависимости от возвращённого результата:

  • truthy или undefined (например, обработчик ничего не вернул) - эдитор откроется
  • falsy - эдитор не откроется
1
cellOpener(s, e)
параметр тип описание
s object ссылка на экземпляр грида
e object объект, содержащий информацию о текущей ячейке
e.row number номер строки
e.datafield string имя выводимого свойства объекта с колонке
e.value object значение в ячейке
Пример

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

1
<Grid id="Grid1" ... cellOpener="Grid1_cellOpener" >

1
2
3
4
    Grid1_cellOpener(grid, e) {
        // e - { row, datafield, value }
        return !!(e.row % 2);
    }

cellPainter#

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

1
cellPainter(s, e)
параметр тип описание
s object ссылка на экземпляр грида
e object объект, содержащий информацию о текущей ячейке
e.row object номер строки
e.column string имя колонки
e.value object значение в ячейке
e.data object значение в строке

Функция должна вернуть имя цвета из палитры, указанной в объекте Colors, либо объект со свойствами:

  • backgroundColor - цвет фона (нужно использовать имя цвета из Colors)
  • fontColor - цвет текста (нужно использовать имя цвета из Colors)
  • fontStyle - задает начертание шрифта (доступное значение: 'italic' - курсив)
  • fontWeight - задает насыщенность шрифта (доступное значение: 'bold' - жирный)

Примечание

Если Grid редактируемый, а колонка не редактируемая, то в этом столбце цвет текста не будет меняться на тот, что вернет cellPainter.

Пример 1

Строки с чётными номерами жёлтые, с нечётными - зелёные

1
<Grid id='Grid1' ... cellPainter='Grid1_cellPainter' />

1
2
3
4
5
import { Colors } from 'ecosoft-lexema8'
//...
Grid1_cellPainter (s, { column, data, row, value } = {}) {
    return row % 2 ? Colors.green : Colors.yellow;
}
Пример 2 
1
<Grid id='Grid1' ... cellPainter='Grid1_cellPainter' />

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { Colors } from 'ecosoft-lexema8'
//...
Grid1_cellPainter (s, { column, data, row, value } = {}) {
    return {
        backgroundColor: Colors.green,
        fontStyle: 'italic',
        fontWeight: 'bold',
        fontColor: Colors.red
    }
}

cellSelected#

Срабатывает при выделении ячейки

параметр тип описание
e object ссылка на экземпляр грида
Пример 
1
    <Grid ... cellSelected="cellSelected" />

1
2
3
4
cellSelected (e) {
  console.log('cellSelected')
  console.log(e)
}

cellValueChanged#

Срабатывает при изменении значения в ячейке

параметр тип описание
e object ссылка на экземпляр грида
Пример 
1
    <Grid ... cellValueChanged="cellValueChanged" />

1
2
3
4
cellValueChanged (e) {
  console.log('cellValueChanged')
  console.log(e)
}

filtered#

Срабатывает при фильтрации.

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

grouped#

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

1
grouped(s, e)
параметр тип описание
s object ссылка на экземпляр грида
e object объект, содержащий информацию о группировке
e.type string тип изменения. Принимаемые значения: add, insert, remove, clear
e.index number индекс задействованной группировки
e.groups [string] массив названий колонок, по которым осуществлена группировка

rowClicked#

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

параметр тип описание
e object ссылка на экземпляр грида
Пример 
1
    <Grid ... rowClicked="rowClicked" />

1
2
3
4
rowClicked (e) {
  console.log('rowClicked')
  console.log(e)
}

rowDoubleClicked#

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

параметр тип описание
e object ссылка на экземпляр грида
Пример 
1
    <Grid ... rowDoubleClicked="rowDoubleClicked" />

1
2
3
4
rowDoubleClicked (e) {
  console.log('rowDoubleClicked')
  console.log(e)
}

rowExpanded#

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

параметр тип описание
e object ссылка на экземпляр грида
Пример 
1
    <Grid ... rowExpanded="rowExpanded" />

1
2
3
4
rowExpanded (e) {
  console.log('rowExpanded')
  console.log(e)
}

rowSelected#

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

параметр тип описание
e object объект с данными
e.args object аргументы
e.args.rowindex number индекс строки
e.args.row object колонки строки
Пример 
1
    <Grid ... rowSelected="rowSelected" />

1
2
3
4
rowSelected (e) {
  console.log('rowSelected')
  console.log(e)
}

rowUnselected#

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

Пример 
1
    <Grid ... rowUnselected="rowUnselected" />

1
2
3
4
rowUnselected (e) {
  console.log('rowUnselected')
  console.log(e)
}

exportCellsFormatter#

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

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

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

  • объект, содержащий информацию о стиле ячейки:
    • fontColor - цвет шрифта в формате ARGB( к примеру \'FFFF0000\' - красный цвет)
    • fgColor - цвет заливки в формате ARGB( к примеру \'FFFF0000\' - красный цвет)
    • blocked - флаг, показывающий, нужно ли запретить редактирование ячейки
Пример 
1
    <Grid ... exportCellsFormatter="exportCellsFormatter" />

1
2
3
4
5
exportCellsFormatter (a) {
  console.log('rowUnsexportCellsFormatterelected')
  console.log(a)
  return {blocked: false}
}

exportGroupsFormatter#

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

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

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

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

horizontallyScrolled#

Срабатывает при горизонтальной прокрутке

1
horizontallyScrolled(s, e)
параметр тип описание
s object ссылка на экземпляр грида
e.value object значения положения скролла
Пример 
1
    <Grid ... horizontallyScrolled="horizontallyScrolled" />

1
2
3
horizontallyScrolled (s, e) {
  console.log(e)
}

cut, copy, paste#

Срабатывает при нажатии соответствующих комбинаций клавиш.

Примечания: Стандартные браузерные механизмы в полной мере не поддерживаются (и ранее тоже полностью не поддерживались), для работы с копированием/вставкой попробуйте использовать обработчики, предоставляемые платформой.

Обработчики cutHandler, copyHandler и pasteHandler вызываются при нажатии соответствующих комбинаций клавиш для работы с буфером обмена (Ctrl+X, Ctrl+C, Ctrl+V). Все три обработчика принимают на вход два аргумента: ссылку на грид и объект со свойством selection, значением которого является массив объектов со свойствами rowindex и, если в гриде было поячеечное выделение, со свойством datafield.

Обработчики вызываются в сфокусированном в данный момент гриде и только при закрытых эдиторах.

Если гриду назначен прикладной обработчик события copyHandler, то стандартное браузерное копирование выделения в буфер обмена не происходит.

Настройка режима выделения#

Режимы выделения изменяют способ выделения строк/ячеек грида. Доступные режимы:

  • none - выделение невозможно
  • singlecell - возможно выделить только одну ячейку
  • multiplecells - при каждом клике на ячейку она будет выделена(множественное выделение). Повторный клик снимет выделение
  • multiplecellsextended - выделение группы ячеек. Аналогично выделению иконок на рабочем столе
  • multiplecellsadvanced - выделение группы ячеек. Аналогично выделению ячеек в таблице Excel
  • singlerow - возможно выделить только одну строку
  • multiplerows - при каждом клике на строку она будет выделена(множественное выделение). Повторный клик снимет выделение
  • multiplerowsextended - выделение группы строк. Аналогично выделению иконок на рабочем столе
  • multiplerowsadvanced - выделение группы строк. Аналогично выделению ячеек в таблице Excel
  • checkbox - выделение строк чекбоксами, используется в аналитическом гриде.
  • standard - выделена ячейка, перемещение выделения с помощью курсорных стрелок. Таблица (постановка прикладников)

Настройка режима редактирования#

Для различных режимов выделения(selection mode) более удобными могут оказаться другие режимы редактирования, кроме стандартного. Режим редактирования определяет каким образом будет начинаться и заканчиваться редактирование. Для того чтобы задать режим редактирования необходимо задать свойство data-lx-editMode, оно может принимать следующие значения:

  • selectedcell - редактирование начинается при клике по уже выделенной ячейке
  • click - редактирование начинается при клике по ячейке
  • selectedrow - редактируется сразу вся строка, т.е. открываются сразу все едиторы строки
  • dblclick - редактирование начинается при двойном клике по ячейке
  • programmatic - редактирование запрещено, начать и закончить редактирование можно только программно через API грида.

Источник данных#

Источником данных грида является observableArray хранящийся в свойстве dataSource.

Пример

Заполнение таблицы данными 

1
2
    const data = ko.mapping.fromJS([]); // observableArray в случае реестра
    this.controls.grid1.dataSource = data;

Настройка итоговых полей#

Чтобы в гриде отображались итоговые поля, необходимо выставить значения свойств грида showAggregates и showStatusBar в значение true. В выбранную колонку следует добавить тэг:

1
<ColumnAggregate>

со свойством type, которое может принимать следующие значения:

  • sum - сумма
  • max - максимальное значение
  • min - минимальное значение
  • avg - среднее значение

Свойство format итогового поля отвечает за формат отображаемых данных и аналогично свойству cellsFormat у колонок. Свойство groupping отвечает за то, нужно ли применять "денежное форматирование" с разделением по разрядам (по умолчанию значение false).

Пример 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<Grid id="grid1" caption="Grid" ... showAggregates="true" showStatusBar="true">
    <Column datafield="id" text="id" width="75">
        <TextBox />
    </Column>
    <Column datafield="typeIndex" text="type" width="120">
        <TextBox />
        <ColumnAggregate type="sum" />
    </Column>
    <Column datafield="text" text="text" width="150">
        <TextBox />
    </Column>
</Grid>

События колонки (Column)#

linkRenderer#

Для того, чтобы программно управлять созданием ссылки в колонке грида, следует задать обработчик linkRenderer выбранной колонки. Он принимает два аргумента - ссылку на грид и ссылку на объект параметров, содержащий следующие свойства:

  • row - номер строки грида
  • column - имя свойства источника данных, привязанного к колонке
  • data - ссылка на объект текущей строки

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<Grid id="grid" cellClicked='cellClicked1'>
    <Column datafield="int2" text="Ссылка" width="120" linkRenderer="linkRenderer1">
        <Link viewName="projectForm"/>
    </Column>
    <Column datafield="date" text="Дата + ссылка" width="200" linkRenderer="linkRenderer2">
        <DateTimeInput/>
    </Column>
    <Column datafield="date2" text="Дата + ссылка + новая вкладка" width="200" linkRenderer="linkRenderer3">
        <DateTimeInput/>
    </Column>
    <Column datafield="date3" text="Ссылка без перехода. Можно применять вместе с cellClicked" width="200" linkRenderer="linkRenderer4">
        <DateTimeInput/>
    </Column>
    <Column datafield="text" text="Ссылка с заблокированым переходом. Можно применять вместе с cellClicked" width="200" linkRenderer="linkRenderer5">
        <TextBox/>
    </Column>
</Grid>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
export default class DemoForm extends Form {
    linkRenderer1(s, e) {
        return {
            url: Link.createUrl({
                route: 'view',
                params: { name: 'gridLinks', id: e.row }
            }),
            text: `some text + ${e.data.int2}`
        };
    }

    linkRenderer2(s, e) {
        return {
            url: Link.createUrl({
                route: 'view',
                params: { name: 'gridLinks', id: e.row }
            })
        };
    }

    linkRenderer3(s, e) {
        return {
            url: Link.createUrl({
                route: 'view',
                params: { name: 'gridLinks', id: e.row }
            }),
            target: "_blank"
        };
    }

    linkRenderer4() {
        //возвращаем ссылку, которая ведёт к текущей вкладке
        return {
            url: Link.createUrl({
                route: 'view',
                params: { name: 'DemoForm' }
            })   
        };
    }

    linkRenderer5() {
        //ссылка без перехода
        return {
            url: false, // falsy значения - false, null, undefined, '' и т.п.
            text: 'ссылка без перехода'
        };
    }

    cellClicked1({ args: { datafield } }){
        if (datafield == 'date3'){
            console.log("Действие по клику на ссылку без открытия новой вкладки");
        }
    }
}

editorPrepared#

Для того, чтобы программно управлять свойствами едитора, к примеру задать новые параметра запросу лукап колонки, следует задать событие editorPrepared выбранной колонки. Он принимает два аргумента - ссылку на едитор и ссылку на объект параметров, содержащий следующие свойства:

  • row - номер строки грида
  • cellValue- текст в ячейке
  • cellText - ссылка на значение ячейки
Пример 
1
2
3
<Column datafield="user" text="user" width="300"   editorPrepared="editorPrepared" >
    <Lookup bindingMode="primitive" valueMember="VCode" displayMember="Name" dataSource="../../models/helpDesk/user.model.json" />
</Column>

1
2
3
4
5
    export default class DemoForm extends Form {
        editorPrepared(s, e) {
            console.log(s, e);
        }
    }

Пакетное выделение в режиме checkbox#

Виджет "из коробки" не поддерживает выделение нескольких идущих подряд строк при выборе строк с нажатой клавишей Shift. В надстройках над виджетом jqxGrid - контролах Grid и AnalyticalGrid - реализовано следующее поведение грида в режиме checkbox при выделении строк с нажатой клавишей Shift:

  • При выделении строки с нажатой клавишей Shift выделяются все строки между только что выделенной строкой и предыдущей выделенной строкой * Если только что выделенная строка выделена первой, либо предыдущая выделенная больше не выделена - выделяются все строки от первой видимой до только что выделенной
  • После выделения грид перерисовывается и прокручивается до самой "нижней" (имеющей наибольший видимый индекс) из выделенных строк

Экспорт данных в файл Excel#

Для экспорта данных грида в Excel достаточно вызвать функцию

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

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

Поведение при различных режимах выделения#

  • В случаях, если выделение отключено (none), либо установлен одиночный режим выделения (singlerow / singlecell): экспортируются все видимые строки, выделение не учитывается
  • При режиме множественного выделения (все остальные режимы):
    • если выделение применено, то экспортируются выделенные строки;
    • иначе - экспортируются все видимые строки

Заголовок таблицы#

Если свойству exportCaption грида установлено значение, то оно будет записано в первую строку экспортируемой таблицы.

Отложенное создание грида#

Отложенное создание является продвинутым способом ускорения открытия форм. Ускорение достигается за счет того, что грид будет создавать только свою объектную модель. На самой форме при этом грид не отобразится (только пустая область с границами). Для включения этого функционала используется свойство deferredCreating со значением true. Создание и отрисовка грида осуществляется с помощью метода create(). До создания запрещается обращение к свойствам и методам контрола. Проверить создан грид или нет, можно с помощью свойcтва isCreated.

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

  • Последовательное создание
1
2
3
4
5
6
7
constructor (args) {
  super(args)
  const { grid1, grid2, grid3 } = this.controls
  grid1.create()
  grid2.create()
  grid3.create()
}

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

  • Асинхронное создание с использованием setTimeout. Позволяет прервать выполнение javascript-кода и начать браузеру отрисовывать страницу. После отрисовки страницы начнется создание гридов.
1
2
3
4
5
6
7
8
9
constructor (args) {
  super(args)
  setTimeout(() => {
    const { grid1, grid2, grid3 } = this.controls
    grid1.create()
    grid2.create()
    grid3.create()
  }, 0)
}

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

  • Асинхронное создание грида после завершения создания предыдущего.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
constructor (args) {
  super(args)
  const { grid1, grid2, grid3 } = this.controls
  this.createGrid(grid1).then(() => {
    return this.createGrid(grid2)
  }).then(() => {
    return this.createGrid(grid3)
  }).fail((error) => {
    // обработка ошибки
  })
}

сreateGrid (grid) {
  const result = new $.Deferred()
  setTimeout(() => {
    try {
      grid.create()
      result.resolve()
    } catch (error) {
      result.reject(error)
    }
  }, 0)
  return result
}

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

1
  Примечание: Если грид создается асинхронно, и не устанавливается блокировка формы (с помощью PageBlocker), то запрещается вместе с асинхронным созданием грида выполнять какой-либо еще javascript-код, т.к. это может привести к ошибкам и некорректной работе приложения, если пользователь закроет форму.

Если грид находится во всплывающем окне, либо вложен в контрол Tab, то создание можно выполнить при их открытии, используя любой из описанных выше способов (в примере используется 3-ий способ).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// обработчик события tabOpened для контрола Tabs
tabOpened (s, e) {
  const { grid3, grid4 } = this.controls
  // проверяется, что пользователь открыл tab, в котором находятся гриды,
  // и что grid3 или grid4 еще не созданы
  if (s.tabs.tab2 === e.tab && (!grid3.isCreated || !grid4.isCreated)) {
    PageBlocker.on()
    this.createGrid(grid3).then(() => {
      return this.сreateGrid(grid4)
    }).always(() => {
      PageBlocker.off()
    }).fail(() => {
      // обработка ошибки
    })
  }
}

сreateGrid (grid) {
  const result = new $.Deferred()
  setTimeout(() => {
    try {
      grid.create()
      result.resolve()
    } catch (error) {
      result.reject(error)
    }
  }, 0)
  return result
}

Ошибки#

События rowSelected/rowUnselected#

Режим выделения singlerow#

  • Если сфокусироваться на гриде, когда нет выделенных строк, то выделится первая строка и для нее сработает событие rowSelected, а затем rowUnselected.
  • Если в гриде нет выделенных строк и грид не сфокусирован, то сработает событие rowSelected для выбранной строки, затем сработает событие rowUnseleced для строки с индексом -1.

Режим выделения multiplerows#

  • При выделении диапазона строк (черз клавишу shift) событие rowSelected срабатывает даже для тех строк, которые уже были выделены, а для строки, по которой кликнули мышкой, событие срабатывает два раза. Для строк, с которых снимается выделение событие rowUnselected не сработает.
  • Событие rowUnselected не сработает, если осуществлять навигацию с помощью клавиатуры.

Режим выделения multiplerowsextended#

  • Событие rowUnseleted сработает только в том случае, когда по выделенной строке кликнуть с зажатой клавишей ctrl.
  • При выделении диапазона строк (через клавишу shift) событие rowSelected срабатывает даже для тех строк, которые уже были выделены, а для строки, по которой кликнули мышкой, событие срабатывает два раза.
  • При выделении диапазона строк (с зажатой левой кнопкой мыши) событие rowSelected сработает два раза для той строки, с которой началось выделенение.
  • Событие rowSelected срабатывает для строки по которой кликнули, если она уже была выделена.

Режим выделения multiplerowsadvanced#

  • Событие rowUnseleted сработает только в том случае, когда по выделенной строке кликнуть с зажатой клавишей ctrl.
  • При выделении диапазона строк (через клавишу shift) событие rowSelected срабатывает даже для тех строк, которые уже были выделены, а для строки, по которой кликнули мышкой, событие срабатывает два раза.
  • Событие rowSelected срабатывает для строки по которой кликнули, если она уже была выделена.

Грид ломает контрол jqxScrollBar#

У контрола jqxScrollBar перестают работать почти все свойста в следующих случаях:

  • Вызов метода destroy у грида
  • Установка свойства showFilterRow = true, если свойство filterable имело значение true

Болгарский getSelectedRowIndexes#

После удаления всех строк из грида getselectedrowindexes возвращает [-1, 0]

Если после этого добавить строки и выделить, то результат getselectedrowindexes всегда будет включать -1

Примеры#

Пример 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<Grid id="nestedGrid" caption="nestedGrid" editorWidth="12" readOnly='false' showAggregates="true" showStatusBar="true" selectionMode="singlecell" width="1200px" detailed="true" rowExpanded="rowExpanded">
  <Column datafield='n1' text='n1' width="200" hint="number">
    <NumberInput visible="true"/>
    <ColumnAggregate type='sum'/>
    <ColumnAggregate type='avg'/>
  </Column>
  <Grid id="nestedGrid2" height="200px" bind="detail" readOnly='false' selectionMode="singlerow">
    <Column datafield='c1' text='c1' width="200">
    <NumberInput visible="true"/>
    </Column>
  </Grid>
</Grid>