Yii2 Картик соединяет Select2 и SortableInput - PullRequest
Новая
       140

Yii2 Картик соединяет Select2 и SortableInput

0 голосов
/ 30 мая 2018

Я использую виджет select2 и sortableinput от kartik.Я хочу выбрать что-то с помощью select2 и иметь выбранный элемент в виджете sortableinput.Мне было интересно, как я могу этого добиться.Только с js?или я должен использовать ajax / pjax?Так как я новичок в этой теме, некоторая помощь с чего начать будет действительно крутой.

пока.

РЕДАКТИРОВАТЬ:

Select2 используетajax и mapquestapi для поиска адреса.Если выбранный адрес выбран, данные должны быть помещены в поле сортируемого ввода.Таким образом, список адресов может быть составлен.В рамках сортируемого ввода можно будет отсортировать адреса.Для прототипа см. Изображение и основной код ниже.

The view for the input

use kartik\select2\Select2;
use kartik\sortinput\SortableInput;

$ajaxJs = <<< JS
function(data) {
    console.log(data.params.data);
    // put here code for logic?
}
JS;    

echo Select2::widget([
    'name' => 'kv-repo-template',
    'value' => '14719648',
    'initValueText' => 'Adresse suchen ...',
    'options' => ['placeholder' => 'Search for a repo ...'],
    'pluginOptions' => [
        'allowClear' => true,
        'minimumInputLength' => 1,
        'ajax' => [
            'url' => "http://www.mapquestapi.com/geocoding/v1/address?key=key_here",
            'dataType' => 'json',
            'delay' => 250,
            //'data' => new JsExpression('function(params) { return {q:params.term, page: params.page}; }'),
            'data' => new JsExpression('function(params) { return {street:params.term, state:"Upper Austria", thumbMaps:false}; }'),
            'processResults' => new JsExpression($resultsJs),
            'cache' => true
        ],
        'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
        'templateResult' => new JsExpression('formatRepo'),
        'templateSelection' => new JsExpression('formatRepoSelection'),
    ],
    'pluginEvents' => [
        "select2:select" => new JsExpression($ajaxJs),
    ],
]);

   $form->field($model, 'sort_list')->label(false)->widget(SortableInput::classname(), [
'items' => [
    1 => ['content' => 'Adress #1'],
    2 => ['content' => 'Adress #2'],
    3 => ['content' => 'Adress #3'],
],
'hideInput' => true,
'options' => ['class' => 'form-control', 'readonly' => true]]);

РЕДАКТИРОВАТЬ 2:

Спасибо за @MuhammadOmerAslam я изменил код.Так что теперь записи будут помещены в список сортируемых входных данных.К сожалению, я не могу перетащить новые записи.Нужно ли мне повторно инициализировать список сортируемых входных данных? 

$ajaxJs = <<< JS
function(data) {
    console.log(data.params.data);
    doc = new DOMParser().parseFromString('<li data-key="' + (document.querySelector('.sortable').childElementCount + 1) + '"role="option" aria-grabbed="false" draggable="true">' + data.params.data.street + '</li>', "text/html").body.firstChild;
    document.querySelector('.sortable').appendChild(doc);
}
JS;

РЕДАКТИРОВАТЬ 3:

Получите сортируемое и вызовите сортируемое ();$('#address-sortable').sortable();

$ajaxJs = <<< JS
function(data) {
    doc = new DOMParser().parseFromString('<li data-key="' + (document.querySelector('.sortable').childElementCount + 1) + '"role="option" aria-grabbed="false" draggable="true">' + data.params.data.street + '</li>', "text/html").body.firstChild;
    document.querySelector('.sortable').appendChild(doc);
    $('#address-sortable').sortable();
}
JS;

и установите идентификатор для списка сортируемых входных данных: 

$form->field($model, 'sort_list')->label(false)->widget(SortableInput::classname(), [
    'items' => [
        1 => ['content' => 'Adress #1'],
        2 => ['content' => 'Adress #2'],
        3 => ['content' => 'Adress #3'],
    ],
    'hideInput' => false,
    'options' => ['class' => 'form-control', 'readonly' => true, 'id'=>'address']
]);

1 Ответ

0 голосов
/ 03 июня 2018

Вы можете сделать это, используя javascript внутри события select:select для select2.

. Для добавления нового элемента в сортируемый список вы можете использовать DOMParser().parseFromString для добавления html для нового элемента (li), я предполагаю, что html-узлы похожи на <li class="p1 mb1 blue bg-white">Address content</li>, а затем использую querySelector().appendChild(), чтобы добавить его в контейнер .js-sortable-buttons.

Вы должны обновить javascript в верхней части окна вы увидите следующее: 

$ajaxJs = <<< JS
function(e) {
    doc = new DOMParser().parseFromString(`<li class="p1 mb1 blue bg-white">${e.currentTarget.options[e.currentTarget.options.selectedIndex].text}</li>`, "text/html").body.firstChild;
    document.querySelector('.js-sortable-buttons').appendChild(doc);
}
JS;

Дополнительные примеры вы можете найти в html5sortable примерах, которые являются основой для yii2-sortable.

...