Yii2 - 在 GridView 中使用 Ajax/Pjax 通过切换工具更新数据 [英] Yii2 - Update data by switch toogle using Ajax/Pjax in GridView
问题描述
我想在不刷新当前页面的情况下使用 Switch Toogle 更新 GridView 中的数据.
这是图片:
所以我想使用上图的工具开关更新属性 status.
这是我的代码:
index.php
$数据提供者，//'过滤器模型' =>$搜索模型，'列' =>[['类' =>'yiigridSerialColumn'],//'校友ID','tahun_lulus','file_excel',['属性' =>'地位'，'格式' =>'生的'，'价值' =>功能($数据){如果($数据->状态== 0){返回 SwitchInput::widget(['名称' =>'status_11','插件选项' =>['尺寸' =>'小型的'，'onColor' =>'成功'，'关闭颜色' =>'危险'，'onText' =>'积极的'，'offText' =>'无效',],'价值' =>真的，]);}否则 if($data->status==1){返回 SwitchInput::widget(['名称' =>'status_11','插件选项' =>['尺寸' =>'小型的'，'onColor' =>'成功'，'关闭颜色' =>'危险'，'onText' =>'积极的'，'offText' =>'无效',],'价值' =>错误的，]);;}}],//'删除','created_at','更新时间',['类' =>'yiigridActionColumn'],],]);?>如何使用 Ajax/Pjax 做到这一点?
在我向您推荐解决方案之前，您需要解决一些问题，因为您在下面的 GridView 中有多余的代码.
您可以将 $data->status 的值传递给 SwitchInput 的 value 属性，而不是使用 if(){}else{}.
然后要实现您要查找的内容，您必须使用 SwitchInput 的 pluginEvent 选项并将 switchChange.bootstrapSwitch 事件绑定到每当 SwitchInput 的状态发生变化时发送 ajax 调用，因此您的 Griview 代码应如下所示
registerJs($js, yiiwebView::POS_READY);回声 GridView::widget(['数据提供者' =>$数据提供者，//'过滤器模型' =>$搜索模型，'列' =>[['类' =>'yiigridSerialColumn'],//'校友ID','tahun_lulus','file_excel',['属性' =>'地位'，'格式' =>'生的'，'价值' =>功能($数据){返回 SwitchInput::widget(['名称' =>'status_11','插件事件' =>['switchChange.bootstrapSwitch' =>function(e){sendRequest(e.currentTarget.checked, $data->id);}";],'插件选项' =>['尺寸' =>'小型的'，'onColor' =>'成功'，'关闭颜色' =>'危险'，'onText' =>'积极的'，'offText' =>'不活动'],'价值' =>$数据->状态]);}],//'删除','created_at','更新时间',['类' =>'yiigridActionColumn'],],]);注意:只需确保将 url:'/controller/action', 更改为实际的 URL 和操作.如果您不使用 prettyUrl，则必须将其更改为 index.php?r=controller/action.
编辑
我已经更新了上面的代码，将行的 id 和 status 一起传递给控制器中的动作，动作将获得如下变量.
公共函数 actionUpdate(){$status = Yii::$app->request->post('status');$id = Yii::$app->request->post('id');}I want to update my data in GridView using Switch Toogle without refresh the current page.
Here is the image:
So I want to update the attribute status using the toogle switch like the image above.
Here is my code:
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'],
],
]); ?>
How can I do that with Ajax/Pjax?
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,
]);;
}
}
],
You can just pass the value of the $data->status to the value attribute of the SwitchInput rather than using if(){}else{}.
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 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'],
],
]
);
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.
Edit
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屋！
