Yii2 Kartik 连接 Select2 和 SortableInput

Question

我正在使用来自 kartik 的 select2 and sortableinput 小部件。我想 select 使用 select2 并在 sortableinput 小部件中包含 selected 元素。我想知道如何实现这一目标。只能用js？还是我必须使用 ajax/pjax？由于我是这个主题的新手，所以从哪里开始的一些帮助真的很酷。

再见。

编辑：

Select2 使用ajax 和mapquestapi 来搜索地址。如果找到的地址是 selected，则数据应放入 sortable-input 字段。因此可以制作一个地址列表。在 sortable-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 我更改了代码。所以现在条目将被放入 sortableinput 列表中。不幸的是我不能拖放新条目。我必须重新初始化 sortableinput 列表吗？

$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：

获取sortable并调用sortable()； $('#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;

并设置可排序输入列表的 ID：

$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']
]);

Answer 1

您可以在 select2 的 select:select 事件中使用 javascript。

要在可排序列表中添加新项目，您可以使用 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.

的基础

Yii2 Kartik 连接 Select2 和 SortableInput

Yii2 Kartik connect Select2 and SortableInput

jquery-select2

yii2

kartik-v