Yii2 - 使用 Ajax 加载为 Select2 插件设置值

Posted

技术标签:

【中文标题】Yii2 - 使用 Ajax 加载为 Select2 插件设置值【英文标题】:Yii2 - Set value for Select2 plugin with Ajax Loading 【发布时间】:2019-02-22 13:30:08 【问题描述】:

我在使用 yii2 的 Select2 kartik 插件时遇到了一些问题。 我使用 Ajax 加载设置了我的插件,并且在我的创建视图中工作正常,所以我可以选择多个值并将其保存在数据库中。

当我显示更新视图时,我想将我保存在数据库中的值设置为可见,但它只显示一个带有 x 图标的灰色矩形。

这是我尝试过的。

echo $form->field($model, 'lista_art')->widget(Select2::classname(), [
    'initValueText' => $art_list,// array of text to show in the tag for the selected items 
    'showToggleAll' => false,
    'options' => ['placeholder' => 'Select...',
                  'multiple' =>true,
                  'value' => $value, // array of Id of the selected items
                 ],
    'pluginOptions' => [
        'tags' => true,
        'tokenSeparators' => [',', ' '],
        'allowClear' => true,
        'minimumInputLength' => 3,
        'language' => [
            'errorLoading' => new JsExpression("function ()  return 'Waiting for results...'; "),
        ],
        'ajax' => [
            'url' => \yii\helpers\Url::to(['lista-articoli']),
            'dataType' => 'json',
            'data' => new JsExpression('function(params)  return q:params.term; ')
        ],
        'escapeMarkup' => new JsExpression('function (markup)  console.log(markup);return markup; '),
        'templateResult' => new JsExpression('function(lista_art)  return lista_art.art_modello; '),
        'templateSelection' => new JsExpression('function (lista_art)  return lista_art.art_modello; '),
    ],
]);

这就是结果。

$art_list$value 是这样的数组

$art_list = ['name1','name2'];
$value= ['id_name1','id_name2'];

如果我用浏览器检查器检查代码,我会发现这个

<li class="select2-selection__choice" title="name1">
    <span class="select2-selection__choice__remove" role="presentation">×</span>
</li>

更新 我会找到错误的,而且它非常微不足道.. 错误在这里

 'templateResult' => new JsExpression('function(lista_art)  return lista_art.art_modello; '),
 'templateSelection' => new JsExpression('function (lista_art)  return lista_art.art_modello; ')

没有 lista_art.art_modello 因为这个元素的对象是格式 id:id_name1text:name1 所以改变这样的代码它会工作 p>

'templateResult' => new JsExpression('function(lista_art)  return lista_art.text; '),
'templateSelection' => new JsExpression('function (lista_art)  return lista_art.text; ')

【问题讨论】:

尝试做$value = ['id_name1' =&gt; 'name1', 'id_name2' =&gt; 'name2']; 不确定它是否有效,但只是一个想法。另外,尝试将'value' =&gt; $value 移出'options' 数组 我会尝试但它不起作用,tnx 为您的评论。 你不能在 select2 上显示数组,$art_list 应该是字符串而不是数组。然后它会工作 我可以使用数组,因为我正在处理多项选择 【参考方案1】:

大家好,感谢您回复我。 我找到了解决问题的方法,我会为遇到相同问题的任何人发布答案。

这是我认为的 Select2 字段:

echo $form->field($model, 'lista_art')->widget(Select2::classname(), [
    'initValueText' => $art_list,// array of text to show in the tag for the selected items 
    'showToggleAll' => false,
    'options' => ['placeholder' => 'Seleziona un prodotto',
                  //'tags' => true,
                  'multiple' =>true,
                  'value' => $value, // array of Id of the selected items
                  'class' => 'validatej'
                 ],
    'pluginOptions' => [
        'tags' => true,
        'tokenSeparators' => [',' , ' '],
        'allowClear' => true,
        'minimumInputLength' => 3,
        'language' => [
            'errorLoading' => new JsExpression("function ()  return 'Waiting for results...'; "),
        ],
        'ajax' => [
            'url' => \yii\helpers\Url::to(['lista-articoli']),
            'dataType' => 'json',
            'data' => new JsExpression('function(params) return q:params.term; ')
        ],
        'escapeMarkup' => new JsExpression('function (markup)  return markup; '),
        'templateResult' => new JsExpression('function(data) return data.text; '),
        'templateSelection' => new JsExpression('function (data)   return data.text; '),
    ],
]);

问题不在这里,而在 ajax 调用的函数中

public function actionGetArt($q = null, $id = null) 
        \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;//restituisco json
        $out = ['results' => ['id' => '', 'text' => '']];
        if (!is_null($q)) 
            $query = new Query;
            $query->select('art_cod AS id, art_modello AS text') 
                  ->from('art')
                  ->where(['ilike', 'art_modello', $q]);
            $command = $query->createCommand();
            $data = $command->queryAll();
            $out['results'] = array_values($data);
        
        elseif ($id > 0) 
            $out['results'] = ['id' => $id, 'text' => Catalogo::find($id)->art_modello];
        

        return $out;
    

在我调用select Sql的那一行

$query->select('art_cod AS id, art_modello AS text') 

您必须根据 select2 小部件将您的 id 表设置为您的文本表(在我的情况下为 art_modello)AS id 和 AS 文本。这未在文档中指定,因此我将阅读代码并找到此解决方案。

【讨论】:

【参考方案2】:

您不能将initValueText 设置为数组。 请参阅文档:

initValueText: 字符串,在 Select2 小部件中显示的文本作为初始值。当您使用带有 ajax 加载数据的小部件和/或您不提供数据时,这很有用且适用。查看 ajax 使用部分以获取示例。

'initValueText' => $art_text, // set the initial display text

改用data

'data' => $art_list,

【讨论】:

Tnx 的答案。但是我使用的是 AJAX,所以根据文档,数据在这里没有用处?因此,如果我有多个预选数据,我该如何显示它们? P.S.我使用我什么都看不到的数据 使用时还需要映射数据[id => title] 是的,没错。数组必须是键 => 值对 好的,我会尽力为您找到解决方案。感谢您的耐心等待。

以上是关于Yii2 - 使用 Ajax 加载为 Select2 插件设置值的主要内容,如果未能解决你的问题,请参考以下文章

在 Yii2 Kartik Select2 小部件中,如何对选择事件进行 ajax 调用?

Yii2 Kartik Select2 Ajax 控制器 - 结果未显示

不加载kartik 的select2 作为GridView 中的过滤器。 Yii2

筛选 YII2 后 Select2 继续加载

[YII2] 去除自带js,加载自己的JS,然后ajax(json)传值接值!

select2 和 Pjax 在 yii2 中不能一起工作