Example tutorial of using bootstrap modal+gridview pop-up box effect-JS Tutorial-php.cn

Example tutorial of using bootstrap modal+gridview pop-up box effect

巴扎黑

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

Original

2137 people have browsed it

This article mainly introduces the pop-up box effect achieved by bootstrap modal+gridview. When gridview clicks to update, a pop-up information form will pop up. It has certain reference value. Interested friends can refer to

The project needs to be in Click Update in the gridview form information to pop up the form for operation without jumping.

1. Add an update operation button to the gridview to call the modal pop-up window

&#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;,
          ]);
        },
      ],

Copy after login

2.gridview Create modal pop-up style in the head

<?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();
?>

Copy after login

3. ajax in gridview

<?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); 
?>

Copy after login

4.Controller update method

 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,
    ]);
  }
}

Copy after login

The above is the detailed content of Example tutorial of using bootstrap modal+gridview pop-up box effect. For more information, please follow other related articles on the PHP Chinese website!