bootstrap modal+gridview实现弹出框效果

bootstrap modal+gridview实现弹出框效果

项目需要在gridview的表单信息中点击更新，弹出表单进行操作，不需要跳转。

GeqHE

1.在girdview中加入更新操作按钮用来调用modal弹窗

'buttons' => [

'update' => function ($url, $model, $key) {

return Html::a('', '#', [

'data-toggle' =&gtGeqHE; 'modal',

'data-target' => '#update-modal',

'class' => 'data-update',

'data-id' => $key,

'title'=>'更改状态',

]);

},

],

2.gridview的头部创建modal弹窗样式

use yii\bootstrap\Modal;//模态弹出框

Modal::begin([

'id' => 'update-modal',

'header' => '

'footer' => 'Close',

]);

Modal::end();

?>

3.gridview中ajax

$requestUpdateUrl = Url::toRoute('update');

$updatejs = <<

$('.data-update').on('click', function () {

$.get('{$requestUpdateUrl}', { id: $(this).closest('tr').data('key') },

function (data) {

$('.modal-body').html(data);

}

);

});

JS;

$this->registerJs($updateJs);

?>

4.控制器update方法

public function actionUpdate($id)

{

$model = Order_packet::findOne($id);

$model->setScenario('update');//指定场景，防止时间等变量同时被更改

if ($model->load(Yii::$app->request->post()) && $model->save()) {

return $this->redirect(['index']);

} else {

return $this->renderAjax('update', [ //这里需要渲染update模版，要在view中写update

'model' => $model,

]);

}

}

$('.data-update').on('click', function () {

$.get('{$requestUpdateUrl}', { id: $(this).closest('tr').data('key') },

function (data) {

$('.modal-body').html(data);

}

);

});

JS;

$this->registerJs($updateJs);

?>

4.控制器update方法

public function actionUpdate($id)

{

$model = Order_packet::findOne($id);

$model->setScenario('update');//指定场景，防止时间等变量同时被更改

if ($model->load(Yii::$app->request->post()) && $model->save()) {

return $this->redirect(['index']);

} else {

return $this->renderAjax('update', [ //这里需要渲染update模版，要在view中写update

'model' => $model,

]);

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。