Ячейки

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

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

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

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

Атрибуты

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

<badge>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
position	right left	Расположение
text	Строка	Текст вне значка
color	primary secondary success danger warning info light dark	Цвет значка. Возможно использование плейсхолдеров
format	Строка	Формат текста в значке
text-format	Строка	Формат текста вне значка
shape	square circle rounded	Форма значка	square
image-field-id	Строка	Поле выборки, отвечающее за картинку в значке
image-position	right left	Позиция картинки в значке	left
image-shape	square 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.

Атрибуты

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

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

Пример

<checkbox action-id="update"/>

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

<edit>

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

Атрибуты

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

Настройки

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

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

Пример

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

<file-upload>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
label	Строка	Универсальный заголовок поля
multi	true false	Поддержка загрузки нескольких файлов	false
ajax	true 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 data	file
show-size	true 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	Класс иконки	Класс иконки
position	right 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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
class	CSS класс	Класс компонента обрамления
width	Строка	Ширина изображения. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px
action-id	Ссылка на действие страницы или виджета	Ссылка на действие, которое выполнятся при клике по изображению
shape	square circle rounded	Форма картинки	square
title	Строка	Заголовок
description	Строка	Подзаголовок
text-position	top 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	Класс иконки	Иконка статуса
place	topLeft topRight bottomLeft bottomRight	Расположение статуса	topLeft

Настройки

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

Пример

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

<action>

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

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

<link>

Ссылка.

Атрибуты

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

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

Пример

<link action-id="update"/>

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

<list>

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

Атрибуты

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

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

Пример

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

<progress>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
class	CSS класс	Класс компонента индикатора
active	true false	С анимацией загрузки?	false
size	large normal small	Размер индикатора прогресса	normal
striped	true false	С полосками?	false
color	primary 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-tooltip	true false	Показать подсказку	false
half	true false	Использование в качестве значений помимо целых чисел также и половинок целых чисел (0, 0.5, 1, 1.5, ...)	false
max	Число	Максимальное значение	5
readonly	true 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-position	left 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-label	true false	Подчеркивание заголовка пунктиром	true
trigger	click 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} объектов"/>