使用bootstrap modal+gridview弹出框效果实现实例教程-tutorial js-php.cn

使用bootstrap modal+gridview弹出框效果实现实例教程

巴扎黑

Lepaskan： 2017-08-17 15:58:28

asal

2099 orang telah melayarinya

这篇文章主要介绍了bootstrap modal+gridview实现弹出框效果，gridview点击更新弹出填写信息表单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

&#39;buttons&#39; => [
  &#39;update&#39; => function ($url, $model, $key) {
       return Html::a(&#39;<span class="glyphicon glyphicon-pencil"></span>&#39;, &#39;#&#39;, [
          &#39;data-toggle&#39; => &#39;modal&#39;,
          &#39;data-target&#39; => &#39;#update-modal&#39;,
          &#39;class&#39; => &#39;data-update&#39;,
          &#39;data-id&#39; => $key,
          &#39;title&#39;=>&#39;更改状态&#39;,
          ]);
        },
      ],

Salin selepas log masuk

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

<?php
use yii\bootstrap\Modal;//模态弹出框
Modal::begin([
  &#39;id&#39; => &#39;update-modal&#39;,
  &#39;header&#39; => &#39;<h4 class="modal-title">更改状态</h4>&#39;,
  &#39;footer&#39; => &#39;<a href="#" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">Close</a>&#39;,
]); 
Modal::end();
?>

Salin selepas log masuk

3.gridview中ajax

<?php    
$requestUpdateUrl = Url::toRoute(&#39;update&#39;);
$updateJs = <<<JS
  $(&#39;.data-update&#39;).on(&#39;click&#39;, function () {
    $.get(&#39;{$requestUpdateUrl}&#39;, { id: $(this).closest(&#39;tr&#39;).data(&#39;key&#39;) },
      function (data) {
        $(&#39;.modal-body&#39;).html(data);
      } 
    );
  });
JS;
$this->registerJs($updateJs); 
?>

Salin selepas log masuk

4.控制器update方法

 public function actionUpdate($id)
{
  $model = Order_packet::findOne($id);
  $model->setScenario(&#39;update&#39;);//指定场景，防止时间等变量同时被更改
  if ($model->load(Yii::$app->request->post()) && $model->save()) {
    return $this->redirect([&#39;index&#39;]);
  } else {
    return $this->renderAjax(&#39;update&#39;, [  //这里需要渲染update模版，要在view中写update
      &#39;model&#39; => $model,
    ]);
  }
}

Salin selepas log masuk

Atas ialah kandungan terperinci 使用bootstrap modal+gridview弹出框效果实现实例教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!