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

TableColumn#

TableColumn - колонки таблицы.

Свойства#

dataField#

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

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

text#

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

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

width#

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

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

align#

тип знач. по умолч. допустимые значения
string left left, right, center

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

cellsAlign#

тип знач. по умолч. допустимые значения
string left left, right, center

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

visible#

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

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

Callbacks#

linkRenderer#

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

параметр тип описание
s TableColumn ссылка на экземпляр грида
e object объект, содержащий информацию о текущей ячейке
e.args object аргументы события
e.args.rowIndex Int номер видимой строки
e.args.dataField String имя колонки
e.args.rowData String значение в строке

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

  • url - адрес ссылки (в случае передачи falsy значения переход заблокируется, стили ссылки при этом сохранятся)
  • text - текст ссылки
  • target - аттрибут ссылки, отвечающий за то, в какой вкладке открыть ссылку. Значение по умолчанию "_self". Принимает параметры аналогичные HTML свойству target элемента link(), выполняет те же функции.
Пример 
1
2
3
4
5
6
7
<Table id="table">
    <TableColumn datafield="int2" text="Ссылка" width="120" linkRenderer="linkRenderer1"/>
    <TableColumn datafield="date" text="Дата + ссылка" linkRenderer="linkRenderer2"/>
    <TableColumn datafield="date2" text="Дата + ссылка + новая вкладка" linkRenderer="linkRenderer3"/>
    <TableColumn datafield="date3" text="Ссылка без перехода" linkRenderer="linkRenderer4"/>
    <TableColumn datafield="text" text="Ссылка с заблокированым переходом" linkRenderer="linkRenderer5"/>
</Table>

 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
export default class DemoForm extends Form {
    linkRenderer1(s, e) {
        return {
            url: Link.createUrl({
                route: 'view',
                params: { name: 'gridLinks', id: e.rowIndex }
            }),
            text: `some text + ${e.rowData.int2}`
        };
    }

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

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

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

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

imageRenderer#

Позволяет отобразить картинку внутри ячейки. Входные параметры обработчика:

параметр тип описание
s TableColumn ссылка на экземпляр грида
e object объект, содержащий информацию о текущей ячейке
e.args object аргументы события
e.args.rowIndex Int номер видимой строки
e.args.dataField String имя колонки
e.args.rowData String значение в строке

Обработчик должен вернуть картинку.

Пример 
1
2
3
<Table id="table">
    <TableColumn datafield="int2" text="Ссылка" imageRenderer="imageRenderer"/>
</Table>

1
2
3
4
5
6
7
import customImage from './customImage.png'

export default class DemoForm extends Form {
    imageRenderer(s, e) {
        return customImage
    }
}