#javascript #php #ajax #yii2 #pjax
#javascript #php #ajax #yii2 #pjax
Вопрос:
Я хочу обновить свои данные в GridView с помощью Switch Toogle без обновления текущей страницы.
Итак, я хочу обновить атрибут status
с помощью переключателя toogle, подобного изображению выше.
Вот мой код:
index.php
<?= GridView::widget([
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => [
['class' => 'yiigridSerialColumn'],
//'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' => 'yiigridActionColumn'],
],
]); ?>
Как я могу это сделать с помощью Ajax / Pjax?
Ответ №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
вместо того, чтобы использовать if(){}else{}
.
Затем, чтобы реализовать то, что вы ищете, вам нужно использовать pluginEvent
опцию SwitchInput
и привязать switchChange.bootstrapSwitch
событие для отправки вызова ajax всякий раз, когда изменяется статус SwitchInput
, поэтому ваш код для Griview должен выглядеть следующим образом
<?php
use kartikswitchinputSwitchInput;
$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, yiiwebView::POS_READY);
echo GridView::widget(
[
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => [
['class' => 'yiigridSerialColumn'],
//'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' => 'yiigridActionColumn'],
],
]
);
Примечание: просто убедитесь, что вы изменили 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');
}
Комментарии:
1. Можете ли вы привести пример контроллера? Я не могу передать
id
(primary_key) данные в Javascript.2. @GeraldSihotang я обновил ответ, пожалуйста, посмотрите.