Skip to main content

Ячейки

Содержимое ячейки таблицы или строки списка.

Библиотека компонентов

http://n2oapp.net/framework/config/schema/cell-3.0

Базовые свойства

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcСтрокаReact компонент ячейкиДля каждой ячейки своя реализация по умолчанию. Для custom атрибут обязательный.
classCSS классКласс компонента ячейки
styleCSS свойствоСтиль компонента ячейки
visibletrue falseВидимость ячейки

<badge>

Ячейка со значком.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
positionright leftРасположение
textСтрокаТекст вне значка
colorprimary secondary success danger warning info light darkЦвет значка. Возможно использование плейсхолдеров
formatСтрокаФормат текста в значке
text-formatСтрокаФормат текста вне значка
shapesquare circle roundedФорма значкаsquare
image-field-idСтрокаПоле выборки, отвечающее за картинку в значке
image-positionright leftПозиция картинки в значкеleft
image-shapesquare circle roundedФорма картинки в значкеcircle

Настройки

#Форма значка BadgeCell
n2o.api.cell.badge.shape=square
#Позиция картинки в значке BadgeCell
n2o.api.cell.badge.image_position=left
#Форма картинки в значке BadgeCell
n2o.api.cell.badge.image_shape=circle

Тело
<switch> - Переключатель

Пример

<badge text="{status}" position="right">
<switch>
<case value="1">success</case>
<case value="2">danger</case>
<default>info</default>
</switch>
</badge>

<cell>

Настраиваемая ячейка. Через расширенные свойства можно указать дополнительные свойства ячейки.

Пример

<cell src="MyCell"
ext:prop1="value1"
ext:prop2="value2">
</cell>

<checkbox>

Чекбокс.

note

Значение true или false берется из значения text-field-id.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
enabledtrue falseДоступность чекбоксаЕсли есть действие, то true, иначе false
action-idСсылка на действие страницы или виджетаСсылка на действие, которое выполнится при клике по чекбоксу

Тело
Обработчики действий

Пример

<checkbox action-id="update"/>
<checkbox>
<invoke operation-id="update"/>
</checkbox>

<edit>

Редактирование значения.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
action-idСсылка на действие страницы или виджетаСсылка на действие виджета, которое выполнятся при завершении редактирования
formatСтрокаФормат текста
enabledtrue falseУсловие доступностиtrue

Настройки

#Доступность для редактирования
n2o.api.cell.edit.enabled = true

Тело
<input-text> - Компонент ввода однострочного текста или чисел
<input-select> - Компонент ввода текста с выбором из выпадающего списка
<date-time> - Компонент ввода даты и времени
<field> - Произвольный React компонент
<action> - Список действий

note

Указание id в input-select является обязательным, в отличие от других видов полей

Пример

<edit action-id="create,update">
<date-time/>
</edit>

<file-upload>

Загрузка файлов.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
labelСтрокаУниверсальный заголовок поля
multitrue falseПоддержка загрузки нескольких файловfalse
ajaxtrue falseПоддержка загрузки через ajax запросtrue
upload-urlСтрокаURL загрузки файла
delete-urlСтрокаURL удаления файла
value-field-idСтрокаПоле выборки, содержащее идентификатор файлаid
label-field-idСтрокаПоле выборки, содержащее наименование файлаname
message-field-idСтрокаПоле выборки, содержащее сообщение файлаmessage
url-field-idСтрокаПоле выборки, содержащее URL скачивания файлаurl
request-paramСтрокаНаименование поля в запросе miltipart form datafile
show-sizetrue falseОтображение размера файлаtrue
acceptСтрокаДоступные расширения файлов (через запятую)
delete-iconКласс иконкиИконка удаления файлов
upload-iconКласс иконкиИконка загрузки файлов

Настройки

#Поддержка загрузки нескольких файлов
n2o.api.cell.file_upload.multi=false
#Поддержка загрузки через ajax запрос
n2o.api.cell.file_upload.ajax=true
#Поле выборки, содержащее идентификатор файла по умолчанию для file-upload
n2o.api.cell.file_upload.value_field_id=id
#Поле выборки, содержащее наименование файла по умолчанию для file-upload
n2o.api.cell.file_upload.label_field_id=name
#Поле выборки, содержащее URL скачивания файла по умолчанию для file-upload
n2o.api.cell.file_upload.url_field_id=url
#Поле выборки, содержащее сообщение файла по умолчанию для file-upload
n2o.api.cell.file_upload.message_field_id=message
#Наименование поля в запросе miltipart form data
n2o.api.cell.file_upload.request_param=file
#Отображение размера файла по умолчанию для file-upload
n2o.api.cell.file_upload.show_size=true

Пример

<file-upload label="Загрузить файл"
upload-url="/files/upload"
delete-url="/files/delete"
accept=".img,.png"/>

<icon>

Иконка.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
textСтрокаТекст иконкиБерётся из значения в text-field-id
iconКласс иконкиКласс иконки
positionleft rightПозиция иконки относительно текстаleft

Настройки

#Позиция иконки относительно текста
n2o.api.cell.icon.position=left

Тело
<switch> - Переключатель

Пример

<icon class="fa-pencil"/>
<icon class="fa-id-card-o">
<switch>
<case value="1">success</case>
<case value="2">danger</case>
<default>info</default>
</switch>
</icon>

<image>

Изображение.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
classCSS классКласс компонента обрамления
widthСтрокаШирина изображения. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px
action-idСсылка на действие страницы или виджетаСсылка на действие, которое выполнятся при клике по изображению
shapesquare circle roundedФорма картинкиsquare
titleСтрокаЗаголовок
descriptionСтрокаПодзаголовок
text-positiontop left right bottomРасположение текста относительно картинкиright

Настройки

#Ширина изображения (px)
n2o.api.cell.image.width=
#Форма изображения
n2o.api.cell.image.shape=square
#Расположение текста относительно картинки
n2o.api.cell.image.text_position=right

Тело
<action> - Список действий
<statuses> - Список статусов

Пример

<image
width="32px"
class="img-thumbnail">
<statuses>
<status/>
...
<status/>
</statuses>
<action>
<open-page page-id="profile"/>
</action>
</image>

<statuses>

Список статусов.

Тело
<status> - Элемент статуса

<status>

Элемент статуса.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcСтрокаReact компонент статусаStatus
field-idСтрокаПоле с данными для статуса
iconКласс иконкиИконка статуса
placetopLeft topRight bottomLeft bottomRightРасположение статусаtopLeft

Настройки

#Расположение статуса относительно картинки
n2o.api.cell.image.status_place=topLeft

Пример

<status
field-id="status"
icon="{icon}"
place="topLeft"
/>

<action>

Действие ячейки.

**Тело**<br/> [Обработчики действий](../xml/action)

Ссылка.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
urlСтрокаАдрес URL открываемой страницы
targetself newWindow applicationСценарий открытия ссылки
action-idСсылка на действие страницы или виджетаДействие виджета, которое будет вызвано при клике по ссылке
iconКласс иконкиИконка ссылки

Тело
Обработчики действий

Пример

<link action-id="update"/>
<link>
<invoke operation-id="update"/>
<open-page page-id="personCard"/>
</link>

<list>

Ячейка со списком.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
sizeЧислоКоличество элементов для группировки
colorprimary secondary success danger warning info light darkЦвет элементов. Возможно использование плейсхолдеров
label-field-idСтрокаОтображаемое поле в объекте, если столбец - массив объектов. Если отсутствует, то столбец является массивом строк
inlinetrue falseОтображение элементов на одной строкеfalse
separatorСтрокаРазделитель между элементами

Тело
<link> - Ссылка в ячейке со списком
<text> - Текст со стилем или без
<badge> - Ячейка со значком
<cell> - Настраиваемая ячейка

Пример

<list color="secondary" size="3"/>

Ссылка в ячейке со списком.

Атрибуты

НаименованиеТипОписание
urlСтрокаАдрес URL открываемой страницы
targetself newWindow applicationСценарий открытия ссылки
iconКласс иконкиИконка ссылки

Пример

<link icon="fa fa-desktop" target="newWindow" url="{link}"/>

<progress>

Индикатор прогресса.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
classCSS классКласс компонента индикатора
activetrue falseС анимацией загрузки?false
sizelarge normal smallРазмер индикатора прогрессаnormal
stripedtrue falseС полосками?false
colorprimary secondary success danger warning info light darkЦвет индикатора. Возможно использование плейсхолдеров

Настройки

# С анимацией загрузки
n2o.api.cell.progress.active=false
# С анимацией загрузки
n2o.api.cell.progress.size=normal
# С полосками
n2o.api.cell.progress.striped=false

Пример

<progress
value="50"
class="bg-success"
size="small"/>

<rating>

Рейтинг.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
show-tooltiptrue falseПоказать подсказкуfalse
halftrue falseИспользование в качестве значений помимо целых чисел также и половинок целых чисел (0, 0.5, 1, 1.5, ...)false
maxЧислоМаксимальное значение5
readonlytrue falseПредназначен только для чтенияtrue
action-idСсылка на действие страницы или виджетаСсылка на обработчик изменения рейтинга

Настройки

#вывод подсказки по умолчанию для RatingCell
n2o.api.cell.rating.show_tooltip=false
#Использование по умолчанию помимо целых чисел также и
# половинок целых чисел в качестве значений RatingCell
n2o.api.cell.rating.half=false
#максимальное значение по умолчанию для RatingCell
n2o.api.cell.rating.max=5
#Значение по умолчанию для аттрибута readonly RatingCell
n2o.api.cell.rating.readonly=true

Тело
Обработчики действий

Пример

<rating show-tooltip="true" half="true"/>
<rating readonly="false">
<invoke operation-id="update"/>
<open-page page-id="personCard"/>
</rating>

<switch>

Переключатель ячеек.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
value-field-idСсылка на значение поляЗначение, в зависимости от которого будет выбираться тип ячейки!

Тело
<case> - Вариант переключения
<default> - Ячейка по умолчанию

Пример

<switch value-field-id="type.id">
<case value="type1">
<badge/>
</case>
<case value="type2">
<icon/>
</case>
<default>
<text/>
</default>
</switch>

<case>

Вариант переключения.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
valueСтрокаЗначение, с которым сравнивается value-field-id!

Тело
Ячейка
Тип ячейки, который будет выбран, в случае верного условия.

<default>

Ячейка по умолчанию.

Тело
Ячейка
Тип ячейки, которая будет выбрана, если ни один из вариантов case не был выбран ранее.

<text>

Текст со стилем или без.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
formatСтрокаФормат текста
subtext-field-idСтрокаИдентификатор поля второго уровня текста
subtext-formatСтрокаФормат второго уровня текста
iconКласс иконкиИконка
icon-positionleft rightПозиция иконкиleft

Настройки

#значение по умолчанию для позиции иконки у TextCell
n2o.api.cell.text.icon_position=left

Тело
<switch> - Переключатель

note

Сам текст берется из значения text-field-id в родительском элементе.

Пример

<text class="font-weight-bold" style="color:red;"/> <!--Жирный шрифт-->

<toolbar>

Ячейка с кнопками.

Меню управляющих кнопок

Пример

<tooltip-list>

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
labelСтрокаУниверсальный заголовок поля. Нужно использовать либо универсальный заголовок, либо 2 вида заголовков (label-few, label-many) при разном числе элементов. Если не задать ни один, то ячейка будет пустой.
label-fewСтрокаЗаголовок поля при нескольких элементах
label-manyСтрокаЗаголовок поля при большом числе элементов
dashed-labeltrue falseПодчеркивание заголовка пунктиромtrue
triggerclick hoverДействие, при котором раскрывается списокhover

Настройка

#триггер по умолчанию для ListTextCell
n2o.api.cell.tooltip_list.trigger=hover
#подчеркивание заголовка пунктиром по умолчанию для ListTextCell
n2o.api.cell.tooltip_list.dashed_label=true

Пример

<tooltip-list label="Объектов {size} шт"/>
<tooltip-list label-few="{size} объекта" label-many="{size} объектов"/>