Гибкий список выбора, select-picker
Введение
Гибкий список имеет множество дополнительных настоек по сравнению с обычным списком.
Демостенд поля - https://demo.falconspace.ru/list/watch/pole-formy-gibkiy-spisok-select-picker---1172
Код типа поля select-picker
Возможности поля типа select-picker
- Отключение одиночных опций
- Разделение опций через разделитель
- Делать кастом разметку для опций
- Делать ограничение на количество выбранных элементов
- Установка стиля поля
- Установка placeholder для невыбранного состояния
- Кнопки выбрать все и снять все
- Поиск по вариантам списка
- Подмена выбранного текста в поле
Пример настройки options_xx параметров
select '' s1, -- 6,7,8
'{
"size": 10,
"header":"Выбери клуб",
"container": "body",
"placeholder": "Футбольные клубы",
"multiple": true,
"multipleLimit": 3,
"style": "alert-info",
"selectedTextFormat": "count > 2",
"search": true,
"searchTokens": true,
"checkAll": true,
"showTick": true,
"width": "100%"
}' options_s1
- size - задает количество видимых выпадающих элементов. auto - учет вывода поля (подстройка), false - показываем все. число - вывод окна на указанное кол-во опций со скроллингом.
- header - вывод подсказки в выпающем окне для выбора опций.
- container - указываем body если список надо выводить на уровне body (используеся, когда окно выбора обрезается при выводе из размеров контейнера-родителя).
- placehoder - подсказка-текст, который выводится в невыбранном состоянии (если его нет, то используется текст из названия поля).
- multiple - если true, то можно будет выбирать несколько элементов
- multipleLimit - сколько максимум можно выбрать элементов при множественном выборе
- style - можно указать некий класс для стилизации элемента, например btn-primary, alert-info
- selectedTextFormat - Задает формат текста, отображаемого, когда selectedTextFormat имеет значение count или count > #. {0} — количество выбранных вариантов. {1} — общее количество доступных для выбора вариантов.
- search - если true, то будет доступен поиск по именам.
- checkAll - если true, то будут доступны кнопки Выбрать все и Снять все
- showTick - если true, то для одиночного выбора также будут работать галочки фиксации выбора (справа от опции)
- width - ширина элемента. fit, auto либо CSS значение для ширины.
Настройки для sp dict опций
Пример:
CREATE PROCEDURE [dbo].[fm_watch-select-picker_s1_dict]
@username nvarchar(256),
@itemID nvarchar(128)
AS
BEGIN
-- SELECT 1
select *, 'fa fa-bars' icon, 0 Disabled, left(text,3) Alt,
0 Divider, -- iif(value=4, 1, 0)
'ID=' + cast( Value as nvarchar) Subtext,
'' Content
from (
select 1 Value, 'Спартак' Text, 'РФ' OptGroup
union
select 2 Value, 'Динамо' Text, 'РФ' OptGroup
union
select 3 Value, 'ЦСКА' Text, 'РФ' OptGroup
union
select 4 Value, 'Лестер' Text, 'Англия' OptGroup
union
select 5 Value, 'Арсенал' Text, 'Англия' OptGroup
union
select 6 Value, 'Миддлсбро' Text, 'Англия' OptGroup
union
select 7 Value, 'Байер' Text, 'Германия' OptGroup
union
select 8 Value, 'Боруссия' Text, 'Германия' OptGroup
) t
order by OptGroup, text
END
Параметры SELECT 1
- Value - значение опции
- Text - текст опции
- Color - цвет элемента
- OptGroup - название группы (для группировки опций, важно чтобы была сортировка по OptGroup)
- Icon - иконка опции выбора, например 'fa fa-bars'
- Disabled - если true, то пункт будет недоступен для выбора.
- Alt - текст, который будет выводиться как выбранных в списке при выбранном состоянии.
- Divider - если true, то пункт будет выведен как разделитель
- Subtext - дополнительный текст, который выводится справа от опции
- Content - html разметка для опции (есть ограничения на применяемые теги для данной разметки).
Сохранение поля при его изменении
Как и другие поля, данное поле можно сделать таким образом, чтобы работало сохранение при изменении поля.
Для этого реализуем процедуру SaveField и в GetItem ставим надстройку для поля в SELECT 1: select 1_edt_XXX, где XXX - код поля.
Страница-источник на сайте falconspace.ru
-
Начало работы
-
Основа Falcon Space
-
Руководства
-
Возможности
-
Коммуникация пользователей
-
Таблицы
-
Формы
-
Поля формы
Общие настройки для полей формы через options_ Галочки с множественным выбором, checkboxes Гибкий список выбора, select-picker Список выбора, комбик, select Список с поиском по базе autocomplete, search-select Целое, дробное число, int, float, html-number Rich редактор текста, html2 Интервал дат, dateRange Скрытые параметры формы, cookie, localStorage, sessionStorage и urlParameter Дата HTML5, datetime-local Слайдер (ползунок), slider Поля формы для загрузки файлов, files, remoteFile, fileContent Множественный список, chosen Градиент, gradient Как сделать списки select и chosen с категориями (optgroup) Выбор из элементов с табуляцией, tabs Флажок-картинка, imageCheckbox Как использовать Флажки и выбор радио с картинкой, imageRadio, imageCheckboxes Дерево с выбором галочек, treeCheckboxes Выбор адреса и сохранение координат места (lat,lng), geo-autocomplete Таймер, timer
Выбор цвета, colorCheck и colorRadio Вставка ссылок по шаблону (ютуб-видео), patternString График работы, weekTime
-
Лендинги
-
Дизайн, стилизация, юзабилити
-
Интеграции
-
Универсальный API
-
Каталоги
-
Навигация
-
Документы
-
Дополнительные компоненты
-
Продвижение, SEO
-
Системные моменты
-
Системное администрирование
-
HOWTO
-
Загрузка файлов, картинок
-
HOWTO SQL
-
HOWTO JS
-
HOWTO Верстка
-
Решение проблем
-
Советы по реализации