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

时间:2014-04-09 20:10:14

标签: php jquery ajax yii jquery-select2

我在视图中使用以下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 }; }',
                    ),
            ),
          ));?>

我的控制器的动作过滤器:

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);
}

2 个答案:

答案 0 :(得分:4)

我使用initSelection以这种方式加载现有记录以进行更新(我用...替换了一些视图代码以关注主要更改)。用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]); });
                   }
                }',
        ),
      ));
?>

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

控制器:

 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和text元素的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);                       
        }',

或直接在触发器上调用:

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

希望有所帮助。

答案 1 :(得分:0)

我试过这样做,但不能这样做

我提出的解决方案填充和选择的解决方案是:

如果属性有一些数据(在更新模式或默认值下),我写了一些javascript,在文件就绪事件之后,将用我的数据填充选择(刚刚选择它在其中推送html),并制作它被选中,然后我休息(或更新)选择以显示我的工作。