php - 如何将模型数据加载到在 Yii 中使用 Ajax 过滤的 Select2 下拉列表

Question

我在我的 View 中使用以下 select2 Yii 小部件来填充下拉列表。由于准备选择列表所需的数据包含超过 2K 条记录，我使用带有 minimumInputLength 参数的 select2 和 ajax 查询来根据用户输入生成列表的部分结果。如果我创建一个新记录，我完全没有问题。它可以很好地填充所有内容，我可以将数据保存到我的数据库中。但是，我不知道如何在更新操作期间将保存的数据加载回此下拉列表。我在某处读到 initselection 旨在用于此目的，但我不知道如何使用它。

有人可以帮我解决这个问题吗？

我的看法:

$this->widget('ext.select2.ESelect2', array(
            'selector' => '#EtelOsszerendeles_osszetevo_id',
            'options'  => array(
                    'allowClear'=>true,
                    'placeholder'=>'Kérem válasszon összetevőt!',
                    'minimumInputLength' => 3,
                    'ajax' => array(
                            'url' => Yii::app()->createUrl('etelOsszerendeles/filterOsszetevo'),
                            'dataType' => 'json',
                            'quietMillis'=> 100,
                            'data' => 'js: function(text,page) {
                                            return {
                                                q: text,
                                                page_limit: 10,
                                                page: page,
                                            };
                                        }',
                            'results'=>'js:function(data,page) { var more = (page * 10) < data.total; return {results: data, more:more }; }',
                    ),
            ),
          ));?>

我的 Controller 的 Action 过滤器:

public function actionFilterOsszetevo()
{
    $list = EtelOsszetevo::model()->findAll('nev like :osszetevo_neve',array(':osszetevo_neve'=>"%".$_GET['q']."%"));
    $result = array();
    foreach ($list as $item){
        $result[] = array(
                'id'=>$item->id,
                'text'=>$item->nev,
        );
    }
    echo CJSON::encode($result);
}

Answer 1

我使用 initSelection 以这种方式加载现有记录以进行更新(我用 ... 替换了您的一些 View 代码以专注于主要更改)。使用 Yii 1.1.14 测试。本质上，我使用两个不同的 ajax 调用:

查看:

<?php

$this->widget('ext.select2.ESelect2', array(
        'selector' => '#EtelOsszerendeles_osszetevo_id',
        'options'  => array(
                ...
                ...
                'ajax' => array(
                        'url' => Yii::app()->createUrl('client/searchByQuery'),
                        ...
                        ...
                        'data' => 'js: function(text,page) {
                                        return {
                                            q: text,
                                            ...
                                        };
                                    }',
                        ...
                ),
                'initSelection'=>'js:function(element,callback) {
                   var id=$(element).val(); // read #selector value
                   if ( id !== "" ) {
                     $.ajax("'.Yii::app()->createUrl('client/searchById').'", {
                       data: { id: id },
                       dataType: "json"
                     }).done(function(data,textStatus, jqXHR) { callback(data[0]); });
                   }
                }',
        ),
      ));
?>

现在，在您的 Controller 中，您应该接收用于 ajax 处理的参数:query (q)，作为字符串，在插入时； id (id) 更新时为 int。在 $_GET 中读取时，参数名称必须与 ajax data 参数(在此示例中插入 q；在更新 id 中)相同。代码未重构/优化:

Controller :

 public function actionSearchByQuery(){
        $data = Client::model()->searchByQuery( (string)$_GET['q'] );
        $result = array();
        foreach($data as $item):
           $result[] = array(
               'id'   => $item->id,
               'text' => $item->name,
           );
        endforeach;
        header('Content-type: application/json');
        echo CJSON::encode( $result );
        Yii::app()->end(); 
 }

 public function actionSearchById(){
        $data = Client::model()->findByPk( (int) $_GET['id'] );
        $result = array();
        foreach($data as $item):
           $result[] = array(
               'id'   => $item->id,
               'text' => $item->name,
           );
        endforeach;
        header('Content-type: application/json');
        echo CJSON::encode( $result );
        Yii::app()->end(); 
 }

模型 - 自定义查询和一些秩序/安全/清洁:)

 public function searchByQuery( $query='' ) {
        $criteria = new CDbCriteria;
        $criteria->select    = 'id, ssn, full_name';
        $criteria->condition = "ssn LIKE :ssn OR full_name LIKE :full_name";
        $criteria->params = array (
            ':ssn' => '%'. $query .'%',
            ':full_name' => '%'. $query .'%',
        );
        $criteria->limit = 10;
        return $this->findAll( $criteria );
 }

编辑:

当使用传统 HTTP Post 预加载更新时(同步，例如使用 Yii 生成的表单)，它开箱即用。对于异步/Ajax 更新，例如使用 JQuery:

事件/触发器:

$('#button').on("click", function(e) {
        ...  
        ... your update logic, ajax request, read values, etc
        ...
        $('#select2_element').select2('val', id_to_load );
});

有了这个，initSelection 将以新的 id_to_load 值以异步方式再次运行，通过 id 重新加载记录。

根据您的情况和需要，initSelection 可以完全不同，以避免从 db 或 you can use formatResult and formatSelection custom functions (are described in Load Remote Data sample source code) 加载记录.阅读文档，我了解到 initSelection 的回调需要带有 id 和文本元素的 JSON 数据才能正确加载，或者您可以尝试将这两个概念结合起来(这个 initSelection 与您的自定义 JS 事件/触发器调用)(未测试):

       'initSelection'=>'js:function(element,callback) {
                   // here your code to load and build your values,
                   // this is very basic sample 
                   var id='myId'; 
                   var text='myValue'; 
                   data = {
                     "id": id,
                     "text": text
                   }
                   callback(data);                       
        }',

或者直接在 Trigger 上调用:

$('#button').on("click", function(e) {
        ...  
        ...             ...
        $("#select2_element").select2("data", {id: "myId", text: "MyVal"});
});

希望对您有所帮助。