Yii2-在GridView中使用Ajax / Pjax通過開關切換更新數據

Question

我想使用Switch Toogle更新GridView中的數據，而無需刷新當前頁面。

這是圖片：

所以我想使用上圖的toogle開關來更新屬性status 。

這是我的代碼：

的index.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的value傳遞給SwitchInput的value屬性，而不是使用if(){}else{} 。

然后執行你在找什么，你必須使用pluginEvent中的選項SwitchInput並綁定switchChange.bootstrapSwitch事件發送Ajax調用每當狀態SwitchInput被改變，以便您對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傳遞給控制器​​中的操作，該操作將獲得如下所示的變量。

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

}