Cgridview 列中的下拉列表，将 ajax 加载到数据库

Question

我遇到了一些问题。所以基本上我试图在 CGridView 列中创建下拉列表来管理状态。我想将 onchange 加载到数据库。这是网格列：

array(
        'name'=>'status',
        'type'=>'raw',
        'value'=>'CHtml::dropDownlist(\'status\',\'\',array(\'1\'=>\'Complete\',
                        \'2\'=>\'Paid\',
        \'3\'=>\'Not paid\'),array(
                                    \'class\'=>\'status\',
                                    \'options\'=>array($data->status=>array(\'selected\'=>\'selected\')),
                                    \'ajax\'=>array(
                                        \'type\' => \'POST\',
                                        \'url\'=>Yii::app()->createUrl(\'user/orders/status\'),                        
                                        \'data\'=>array(\'status\'=>\'js:this.value\',\'order\'=>$data->id),
        )
        ));',
        ),

这是控制器操作代码

public function actionStatus()
    {
    if (isset($_POST['order'])){
        $model=$this->loadModel($_POST['order']);
        $model->status=$_POST['status'];        
    $model->save();
      
    }    
    }

那么有什么问题。我得到最后一个 $data->id 而不是下拉更改的元素的 id 。其他一切正常。

也许这很容易，但我找不到任何解决方案。

Answer 1

首先：如果您在模型类中使用 getter，则可以避免所有这些难看的转义代码：

public function getStatusDropdown()
{
    $stats = array(
        1 => 'Complete',
        2 => 'Paid',
        3 => 'Not paid',
    );
    return CHtml::dropDownlist('status',$this->status,$stats, array(
        'class'     => 'status',
        'data-id'   => $this->id,
    ));
}

现在添加一个网格列，如

array(
    'name'  => 'Status',
    'type'  => 'raw',
    'value' => '$data->statusDropdown',
),

现在剩下的就是添加一些 Javascript。如果您注册一个 sn-p 来控制所有按钮，而不是为每个按钮添加脚本，效率会更高。您必须收听所有下拉列表的 change 事件。因此，您可以使用 gridview 在页面上注册一个内联 sn-p，如下所示：

$url = $this->createUrl('user/orders/status');
Yii::app()->clientScript->registerScript('initStatus',
    "$('select.status').on('change','body',function() {
        el = $(this);
        $.ajaxPost('$url', {status: el.val(), id: el.data('id')}
    });",
    CClientScript::POS_READY
);

我添加了一个body 选择器以确保如果您的 GridView 通过 AJAX 更新，该事件仍然会触发。您可能还想在 ajaxPost() 调用中添加成功处理程序。

请注意，以上内容可能包含拼写错误，因此不要只是复制和粘贴，而是要尝试了解其工作原理。它应该能让你走上正轨。