Question

我正在使用kartik中的select2和sortableinput小部件。我想用select2选择一些东西，并在sortableinput小部件中包含所选元素。我想知道我是如何实现这一目标的。只有js？或者我必须使用ajax / pjax？由于我是这个主题的新手，一些帮助从哪里开始会非常酷。

再见。

修改

Select2使用ajax和mapquestapi来搜索地址。如果选择了找到的地址，则应将数据放入可排序输入字段。因此可以制作地址列表。在可排序输入中，可以对地址进行排序。有关原型，请参阅下面的图像和基本代码。

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（）; $('#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;

并设置sortableinput列表的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

您可以在[<>]?的{{1}}事件中使用javascript来完成此操作。

要在可排序列表中添加新项目，您可以使用select:select为新项目select2添加DOMParser().parseFromString，我假设html节点类似于{{ 1}}然后使用html将其添加到li容器。

您应该将视图顶部的<li class="p1 mb1 blue bg-white">Address content</li>块更新为以下内容。

querySelector().appendChild()

有关更多示例，您可以访问html5sortable示例，这些示例是.js-sortable-buttons的基础。

Yii2 Kartik连接Select2和SortableInput

1 个答案: