braun_alex
@braun_alex
Новичёк

Как подружить Yii2 + Select2 + Select2-multi-checkboxes?

Задача стоит следующая, нужно чтобы в selecte формы была возможность выбора нескольких значений и был быстрый поиск. Select2 это всё умеет, но едет дизайн после выбора более чем одного значения, отлично подходит плагин https://github.com/wasikuss/select2-multi-checkboxes и он не расширяет поле по высоте если выбрано несколкьо значений т.к. прописывает количество выбранных элементов сразу в первом поле, а не в виде тегов по ширине.

Как правильно подружить Yii2 + Select2 с плагином select2-multi-checkboxes?
  • Вопрос задан
  • 51 просмотр
Решения вопроса 1
tomclancys
@tomclancys
Вот так как вариант, в view добавляем:
$this->registerJsFile('/js/select2.multi-checkboxes.js', ['depends' => [\yii\web\JqueryAsset::className()]]);
$js = <<<JS
    $.fn.select2.amd.require([
        'select2/selection/single',
        'select2/selection/placeholder',
        'select2/selection/allowClear',
        'select2/dropdown',
        'select2/dropdown/search',
        'select2/dropdown/attachBody',
        'select2/utils'
    ], function (SingleSelection, Placeholder, AllowClear, Dropdown, DropdownSearch, AttachBody, Utils) {
        var SelectionAdapter = Utils.Decorate(
            SingleSelection,
            Placeholder
        );
        SelectionAdapter = Utils.Decorate(
            SelectionAdapter,
            AllowClear
        );
        var DropdownAdapter = Utils.Decorate(
            Utils.Decorate(
                Dropdown,
                DropdownSearch
            ),
            AttachBody
        );
        var base_element = $('.select2-multiple');
        $(base_element).each(function (index, value){
            var this_select = $(this);
            $(this_select).select2({
                theme: "bootstrap4",
                placeholder: 'Выбрать',
                selectionAdapter: SelectionAdapter,
                dropdownAdapter: DropdownAdapter,
                allowClear: true,
                templateResult: function (data) {
                    if (!data.id) { return data.text; }
                    var res = $('<div></div>');
                    res.text(data.text);
                    res.addClass('wrap');
                    return res;
                },
                templateSelection: function (data) {
                    if (!data.id) { return data.text; }
                    var selected = ($(this_select).val() || []).length;
                    var total = $('option', $(this_select)).length;
                    return "Выбрано " + selected + " из " + total;
                }
            })
        });
    });
JS;
$this->registerJs( $js, $position = yii\web\View::POS_END, $key = null );
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы