Yii2-在GridView中使用Ajax/Pjax通过开关切换来更新数据 [英] Yii2 - Update data by switch toogle using Ajax/Pjax in GridView

问题描述

我想使用Switch Toogle更新GridView中的数据，而无需刷新当前页面.

这是图像:

I want to update my data in GridView using Switch Toogle without refresh the current page.

Here is the image:

所以我想使用上图所示的toogle开关来更新属性status.

这是我的代码:

So I want to update the attribute status using the toogle switch like the image above.

Here is my code:

index.php

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做到这一点?

How can I do that with Ajax/Pjax?

推荐答案

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

Before I suggest you the solution there is something you need to fix as you have redundant code inside the GridView that is below.

[
    '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{}.

You can just pass the value of the $data->status to the value attribute of the SwitchInput rather than using if(){}else{}.

然后要实现您要查找的内容，必须使用SwitchInput的pluginEvent选项并绑定switchChange.bootstrapSwitch事件，以便在SwitchInput的状态更改时发送ajax调用，因此您的代码因为Griview应该看起来像下面的

Then to implement what you are looking for you have to use the pluginEvent option of the SwitchInput and bind the switchChange.bootstrapSwitch event to send an ajax call whenever the status of the SwitchInput is changed so your code for the Griview should look like below

<?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.

Note: just make sure you change the url:'/controller/action', to the actual URL and action. If you are not using prettyUrl then you must change it to index.php?r=controller/action.

我已经更新了上面的代码，以将行的id和status传递给控制器​​中的操作，该操作将获得如下所示的变量.

I have updated the code above to pass the id of the row along with the status to your action in the controller, the action will get the variables like below.

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

}

这篇关于Yii2-在GridView中使用Ajax/Pjax通过开关切换来更新数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！