Yii2 - обновление данных с помощью переключателя toogle с использованием Ajax / Pjax в GridView - PullRequest
Новая
       37

Yii2 - обновление данных с помощью переключателя toogle с использованием Ajax / Pjax в GridView

0 голосов
/ 12 марта 2019

Я хочу обновить свои данные в GridView с помощью Switch Toogle без обновления текущей страницы.

Вот изображение:
img1

Итак, я хочу обновить атрибут status, используя переключатель toogle, как на картинке выше.

Вот мой код:

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?

1 Ответ

1 голос
/ 13 марта 2019

Прежде чем я предложу вам решение, вам нужно кое-что исправить, поскольку у вас есть избыточный код внутри 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 и связать 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');

}
...