Yii2 - 使用GridView中的Ajax / Pjax通过切换开关更新数据

Question

我想使用Switch Toggle在GridView中更新我的数据而不刷新当前页面。 这是图像： qazxsw poi

所以我想使用切换开关更新属性qazxsw poi，如上图所示。 这是我的代码：

的index.php

我怎么能用Ajax / Pjax做到这一点？

Answer 1

在我向您推荐解决方案之前，您需要修复一些问题，因为您在status中有冗余代码，如下所示。

<?= 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'],
    ],
]); ?>

您可以将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的if(){}else{}选项并绑定pluginEvent事件，以便在SwitchInput的状态发生变化时发送ajax调用，这样你的Griview代码应如下所示

switchChange.bootstrapSwitch

注意：只需确保将SwitchInput更改为实际的URL和操作。如果您不使用

<?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',。

Edit

我更新了上面的代码，将行的prettyUrl和index.php?r=controller/action一起传递给控制器​​中的动作，动作将得到如下变量。

id