javascript - Yii2 - 在 GridView 中使用 Ajax/Pjax 通过 switch toogle 更新数据

Question

我想在不刷新当前页面的情况下使用 Switch Toogle 更新 GridView 中的数据。

这是图像:

所以我想像上图一样使用toogle开关更新属性status。

这是我的代码:

索引.php

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    //'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],

        //'alumni_id',
        'tahun_lulus',
        'file_excel',
        [
            'attribute' => 'status',
            'format' => 'raw',
            'value' => function($data){
                if($data->status==0){
                    return SwitchInput::widget([
                        'name' => 'status_11',
                        'pluginOptions' => [
                            'size' => 'mini',
                            'onColor' => 'success',
                            'offColor' => 'danger',
                            'onText' => 'Active',
                            'offText' => 'Inactive',
                        ],
                        'value' => true,
                    ]);
                }
                else if($data->status==1){
                    return SwitchInput::widget([
                        'name' => 'status_11',
                        'pluginOptions' => [
                            'size' => 'mini',
                            'onColor' => 'success',
                            'offColor' => 'danger',
                            'onText' => 'Active',
                            'offText' => 'Inactive',
                        ],
                        'value' => false,
                    ]);;
                }
            }
        ],
        //'deleted',
        'created_at',
        'updated_at',

        [ 'class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

我如何使用 Ajax/Pjax 做到这一点？

Answer 1

在我建议您解决方案之前，您需要修复一些问题，因为您在下面的 GridView 中有冗余代码。

[
    'attribute' => 'status',
    'format' => 'raw',
    'value' => function($data){
        if($data->status==0){
            return SwitchInput::widget([
                'name' => 'status_11',
                'pluginOptions' => [
                    'size' => 'mini',
                    'onColor' => 'success',
                    'offColor' => 'danger',
                    'onText' => 'Active',
                    'offText' => 'Inactive',
                ],
                'value' => true,
            ]);
        }
        else if($data->status==1){
            return SwitchInput::widget([
                'name' => 'status_11',
                'pluginOptions' => [
                    'size' => 'mini',
                    'onColor' => 'success',
                    'offColor' => 'danger',
                    'onText' => 'Active',
                    'offText' => 'Inactive',
                ],
                'value' => false,
            ]);;
        }
    }
],

您可以将 $data->status 的值传递给 SwitchInput 的 value 属性，而不是使用 if(){}else{}.

然后要实现您正在寻找的内容，您必须使用 SwitchInput 的 pluginEvent 选项并将 switchChange.bootstrapSwitch 事件绑定(bind)到每当 SwitchInput 的状态发生变化时发送一个 ajax 调用，这样你的 Griview 代码应该如下所示

<?php
use kartik\switchinput\SwitchInput;

$js = <<< JS
    function sendRequest(status, id){
        $.ajax({
            url:'/controller/action',
            method:'post',
            data:{status:status,id:id},
            success:function(data){
                alert(data);
            },
            error:function(jqXhr,status,error){
                alert(error);
            }
        });
    }
JS;

$this->registerJs($js, \yii\web\View::POS_READY);


echo  GridView::widget(
    [
        'dataProvider' => $dataProvider,
        //'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
    
            //'alumni_id',
            'tahun_lulus',
            'file_excel',
            [
                'attribute' => 'status',
                'format' => 'raw',
                'value' => function ($data) {
                    return SwitchInput::widget(
                        [
                            'name' => 'status_11',
                            'pluginEvents' => [
                                'switchChange.bootstrapSwitch' => "function(e){sendRequest(e.currentTarget.checked, $data->id);}"
                            ],
                    
                            'pluginOptions' => [
                                'size' => 'mini',
                                'onColor' => 'success',
                                'offColor' => 'danger',
                                'onText' => 'Active',
                                'offText' => 'Inactive'
                            ],
                            'value' => $data->status
                        ]
                    );
                }
            ],
            //'deleted',
            'created_at',
            'updated_at',
    
            [ 'class' => 'yii\grid\ActionColumn'],
        ],
    ]
); 

注意:只需确保将 url:'/controller/action', 更改为实际的 URL 和操作。如果您不使用 prettyUrl，则必须将其更改为 index.php?r=controller/action。

编辑

我更新了上面的代码，将行的 id 和 status 一起传递给您在 Controller 中的操作，该操作将获得如下所示的变量。

public function actionUpdate(){
   $status = Yii::$app->request->post('status');
   $id = Yii::$app->request->post('id');

}