ManyToMany

Назначение компонента

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

Общий вид типового справочника для множественного выбора представлен на рисунке:

Логика работы

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

Пошаговая работа пользователя с ManyToMany …

Поиск значений

Пустой добавленный компонент ManyToMany выглядит следующим образом:

рис. 1

По кнопке «Изменить» (текст кнопки может быть изменен), открывается диалоговое окно заполнения компонента:

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

Указание требуемых значений

После нахождения требуемого значения в справочнике нужно указать на него при помощи мыши. Поле указанного значения окрасится в серый цвет. Общий вид указанного требуемого значения приведен на рисунке:

Выбираем значения из справочника

Формирование списка требуемых значений

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

Кнопки выбора

Добавим значения в список требуемых значений:

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

Сохранение требуемых значений

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

Компонент заполнен выбранными значениями

Настройка компонента

  1. Необходимо добавить компонент ManyToMany на страницу.

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

ManyToMany – это составной компонент, состоящий из след. элементов:

Здесь:

Настроим каждый элемент отдельно.

шаг 0. Продумать состав данных…

Для этого определимся какие таблицы будем использовать:

  • Таблица А — таблица, к которой привязывается справочник (таблица B)
  • Таблица А_В — линковая (Link) таблица, она будет заполняться из А и В
  • Таблица В — таблица-справочник, из которой будут браться значения

шаг 1. Настройка Form…

Если компонент ManyToMany вложен в компонент Form, то предварительно необходимо настроить компонент Form.

Для этого в структуру сущностей Form добавьте таблицу А (см. шаг 0).

шаг 2. Настройка основной области — LinkField

Наименование Назначение Значение по умолчанию
visible задаёт видимость компоненты true
disabled задаёт редактируемость компоненты false
tooltip задаёт текст всплывающей подсказки, которая появляется при наведении курсора на элемент
cssClasses список CSS классов (см. раздел Дизайн)
style список основных свойств:
  • padding (необходимо указывать единицы измерения)
  • margin (необходимо указывать единицы измерения). См. http://htmlbook.ru/css/margin. Например для задания отступа справа на 50px необходимо задать значение 0px 50px 0px 0px
  • border - задает размер, цвет и стиль рамки. Например “20px solid red”. Подробнее http://htmlbook.ru/css/border
  • height - задает высоту компонента
  • width - задает ширину компонента
  • minHeight - задает минимальную высоту компонента
  • minWidth - задает минимальную ширину компонента
  • maxHeight - задает максимальную высоту компонента
  • maxWidth - задает максимальную ширину компонента.
rowsAddedEvent событие, которое триггерится при добавлении строк
Наименование Назначение Значение по умолчанию
LinkFieldRpcService → LinkFieldService → linkFieldDao → graph Выбор графа сущностей для подгрузки и сохранения данных. Главной сущностью должна быть таблица – справочник (таблица B), который линкуется (refToSecondTablePK)
LinkFieldRpcService → LinkFieldService → linkFieldDao → distinct Исключить дублирующиеся записи
GridColumns Добавление колонок. С помощью кнопки « + » добавляем элементы. Каждый элемент является колонкой(столбцом). Имеет следующие свойства:
  • field – задает пару таблица:колонка в БД
  • displayName – отображаемое наименование колонки
  • sortOrder (ASC | DESC) – указывает порядок сортировки значений в указанном столбце — по возрастанию или по убыванию
  • width – задает ширину
  • formatter – задает скрипт для манипуляции с отображением данных при загрузке
LinkFieldSelectionScript multiselectable – возможность выбирать сразу несколько элементов
LinkFieldCustomSaveLoadScript Задание связи между таблицами:
  • refToSecondTablePKFromLinkTable – ссылка на справочник (таблица В) из линковой таблицы А_В
  • refToMainTablePKFromLinkTable – ссылка на таблицу А из линковой таблицы А_В
  • mainTablePKColumn – первичный ключ таблицы-сущности из структуры сущ. Form к которой привязывается справочник (не обязательно главная!)

шаг 3. Настройка ChangeButton…

Наименование Назначение Значение по умолчанию
visible задаёт видимость компоненты true
disabled задаёт редактируемость компоненты false
tooltip задаёт текст всплывающей подсказки, которая появляется при наведении курсора на элемент
cssClasses список CSS классов (см. раздел Дизайн)
style список основных свойств:
  • padding (необходимо указывать единицы измерения)
  • margin (необходимо указывать единицы измерения). См. http://htmlbook.ru/css/margin. Например для задания отступа справа на 50px необходимо задать значение 0px 50px 0px 0px
  • border - задает размер, цвет и стиль рамки. Например “20px solid red”. Подробнее http://htmlbook.ru/css/border
  • height - задает высоту компонента
  • width - задает ширину компонента
  • minHeight - задает минимальную высоту компонента
  • minWidth - задает минимальную ширину компонента
  • maxHeight - задает максимальную высоту компонента
  • maxWidth - задает максимальную ширину компонента.
Наименование Назначение Значение по умолчанию
caption наименование кнопки, видимое пользователю Изменить
confirmation text если задать здесь текст, то пользователю будет отображёно диалоговое окно с этим текстом и кнопками Да/Нет. Используется для подтверждения действия

шаг 4. Настройка диалогового окна выбора значений SelectDialog…

Диалог выбора (SelectDialog) состоит из двух частей:

  • GridsPanel который включается в себя:
  • ButtonsContainer который содержит в себе кнопки диалогового окна

Настроим каждый блок по отдельности:

Настройка GridsPanel

  1. Настройка таблицы списка значений AvailableRecordsGrid

Наименование Назначение Значение по умолчанию
visible задаёт видимость компоненты true
disabled задаёт редактируемость компоненты false
tooltip задаёт текст всплывающей подсказки, которая появляется при наведении курсора на элемент
cssClasses список CSS классов (см. раздел Дизайн)
style список основных свойств:
  • padding (необходимо указывать единицы измерения)
  • margin (необходимо указывать единицы измерения). См. http://htmlbook.ru/css/margin. Например для задания отступа справа на 50px необходимо задать значение 0px 50px 0px 0px
  • border - задает размер, цвет и стиль рамки. Например “20px solid red”. Подробнее http://htmlbook.ru/css/border
  • height - задает высоту компонента
  • width - задает ширину компонента
  • minHeight - задает минимальную высоту компонента
  • minWidth - задает минимальную ширину компонента
  • maxHeight - задает максимальную высоту компонента
  • maxWidth - задает максимальную ширину компонента.
Наименование Назначение Значение по умолчанию
GridRpcService → gridService → LoadDao → graph Выбор графа сущностей для подгрузки и сохранения данных. Главной сущностью должна быть та же таблица, что и в графе LinkField. Этот граф может быть чуть более расширенный – например для сортировки.
GridColumns Добавление колонок. С помощью кнопки « + » добавляем элементы. Каждый элемент является колонкой(столбцом). Имеет следующие свойства:
  • field – задает пару таблица:колонка в БД
  • displayName – отображаемое наименование колонки
  • sortOrder (ASC | DESC) – указывает порядок сортировки значений в указанном столбце — по возрастанию или по убыванию
  • width – задает ширину
  • formatter – задает скрипт для манипуляции с отображением данных при загрузке

2. Настройка кнопок действий Buttons

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

3. Настройка таблицы выбранных значений LinkFieldDialog

Настраивать необязательно. Настраивается для более детального вывода.

Наименование Назначение Значение по умолчанию
visible задаёт видимость компоненты true
disabled задаёт редактируемость компоненты false
tooltip задаёт текст всплывающей подсказки, которая появляется при наведении курсора на элемент
cssClasses список CSS классов (см. раздел Дизайн)
style список основных свойств:
  • padding (необходимо указывать единицы измерения)
  • margin (необходимо указывать единицы измерения). См. http://htmlbook.ru/css/margin. Например для задания отступа справа на 50px необходимо задать значение 0px 50px 0px 0px
  • border - задает размер, цвет и стиль рамки. Например “20px solid red”. Подробнее http://htmlbook.ru/css/border
  • height - задает высоту компонента
  • width - задает ширину компонента
  • minHeight - задает минимальную высоту компонента
  • minWidth - задает минимальную ширину компонента
  • maxHeight - задает максимальную высоту компонента
  • maxWidth - задает максимальную ширину компонента.
Наименование Назначение Значение по умолчанию
GridColumns Добавление колонок. С помощью кнопки « + » добавляем элементы. Каждый элемент является колонкой(столбцом). Имеет следующие свойства:
  • field – задает пару таблица:колонка в БД
  • displayName – отображаемое наименование колонки
  • sortOrder (ASC | DESC) – указывает порядок сортировки значений в указанном столбце — по возрастанию или по убыванию
  • width – задает ширину
  • formatter – задает скрипт для манипуляции с отображением данных при загрузке
LinkFieldSelectionScript multiselectable – возможность выбирать сразу несколько элементов

Настройка ButtonsContainer

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

Пример минимальной настройки компонента ManyToMany…

Задача: Необходимо организовать заполнение поля таблицы «Тема услуги, предоставленной гражданину» (Таблица А_В) путем выбора из справочника «Услуги» (Таблица В).

Дано:

  • Таблица А - таблица «Тема услуги, предоставленной гражданину»
  • Таблица А_В - линковая (Link) таблица
  • Таблица В - таблица-справочник «Услуги»
  1. В структуру сущностей Form добавляем таблицу А.
  2. В Form добавляем компонент ManyToMany.
  3. Настраиваем основную область LinkField в ManyToMany:
    1. LinkFieldRpcService → LinkFieldService → linkFieldDao__→ graph:
      Главной сущностью является справочник (Таблица В). Добавьте линковую таблицу А_В и установите связь с главной сущностью (стрелка от справочника к линковой таблице).
      Добавьте все остальные таблицы и связи, если хотите отобразить дополнительную информацию в основной области LinkField и настройте в GridColumns.
    2. Зададим связи между таблицами в LinkFieldCustomSaveLoadScript:
    • refToSecondTablePKFromLinkTable – ссылка на справочник (Таблица В) из линковой таблицы А_В.
    • refToMainTablePKFromLinkTable – ссылка на таблицу А из линковой таблицы А_В.
    • mainTablePKColumn – выбираем первичный ключ таблицы, добавленной в структуру сущностей Form в п. 1.
  4. Настройка таблицы списка значений AvailableRecordsGrid в SelectDialog:

    GridRpcService → gridService → LoadDao → graph:

    Главной сущностью является та же таблица, что и в графе LinkField (см. п. 3а). Добавьте все остальные таблицы и связи, если хотите отобразить дополнительную информацию в таблице списка значений и настройте в GridColumns.

    Не добавляйте линковую таблицу в структуру сущностей AvailableRecordsGrid! Это замножит записи.

Формирование склейки на основе колонки из LinkField

SpliceColumnValues - скрипт для формирования склейки на основе колонки из LinkField

Параметр Назначение
prefix префиксный символ склейки
glue разделитель элементов склейки
postfix постфиксный символ склейки
lineBreak флаг для использования переноса строк (если true, то используется перенос строк)
columnOrderNum номер колонки, по которому формируется склейка

Пример:

При параметрах prefix = ‘[’, glue = ’; ’, postfix = ’]’ и элементах el1, el2, el3, склейка будет выглядеть так: [el1; el2; el3]