Гибкий список выбора, 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 - код поля.