bootstrap modal+gridview實(shí)現(xiàn)彈出框效果
項(xiàng)目需要在gridview的表單信息中點(diǎn)擊更新,彈出表單進(jìn)行操作,不需要跳轉(zhuǎn)。
1.在girdview中加入更新操作按鈕用來(lái)調(diào)用modal彈窗
'buttons' => [ 'update' => function ($url, $model, $key) { return Html::a('<span class="glyphicon glyphicon-pencil"></span>', '#', [ 'data-toggle' => 'modal', 'data-target' => '#update-modal', 'class' => 'data-update', 'data-id' => $key, 'title'=>'更改狀態(tài)', ]); }, ],
2.gridview的頭部創(chuàng)建modal彈窗樣式
<?php use yii\bootstrap\Modal;//模態(tài)彈出框 Modal::begin([ 'id' => 'update-modal', 'header' => '<h4 class="modal-title">更改狀態(tài)</h4>', 'footer' => '<a href="#" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">Close</a>', ]); Modal::end(); ?>
3.gridview中ajax
<?php $requestUpdateUrl = Url::toRoute('update'); $updateJs = <<<JS $('.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');//指定場(chǎng)景,防止時(shí)間等變量同時(shí)被更改 if ($model->load(Yii::$app->request->post()) && $model->save()) { return $this->redirect(['index']); } else { return $this->renderAjax('update', [ //這里需要渲染update模版,要在view中寫(xiě)update 'model' => $model, ]); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js對(duì)列表中第一個(gè)值處理與jsp頁(yè)面對(duì)列表中第一個(gè)值處理的區(qū)別詳解
本文是對(duì)js對(duì)列表中第一個(gè)值處理與jsp頁(yè)面對(duì)列表中第一個(gè)值處理的區(qū)別進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11javascript IFrame 強(qiáng)制刷新代碼
經(jīng)常會(huì)使用多個(gè)iframe來(lái)展示領(lǐng)域模型主子關(guān)系(主/子單),測(cè)試發(fā)現(xiàn)iframe是有cache功能的2009-07-07JavaScript asp.net 獲取當(dāng)前超鏈接中的文本
今天用到,不會(huì)。網(wǎng)上找到一個(gè)方法,趕快記下來(lái)??梢垣@取超鏈接的鏈接文本。2009-04-04TypeScript 安裝使用及基本數(shù)據(jù)類(lèi)型
這篇文章主要介紹了TypeScript 安裝使用及基本數(shù)據(jù)類(lèi)型,本文分步驟給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03非常實(shí)用的js驗(yàn)證框架實(shí)現(xiàn)源碼 附原理方法
這篇文章主要為大家詳細(xì)介紹了一個(gè)非常實(shí)用的js驗(yàn)證框架實(shí)現(xiàn)源碼,并附原理方法,感興趣的小伙伴們可以參考一下2016-06-06微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06JS實(shí)現(xiàn)登錄頁(yè)密碼的顯示和隱藏功能
在登錄頁(yè)經(jīng)常會(huì)用到通過(guò)點(diǎn)擊文本框的類(lèi)似小眼睛圖片來(lái)實(shí)現(xiàn)隱藏顯示密碼的功能。下面給大家介紹基于JS實(shí)現(xiàn)登錄頁(yè)密碼的顯示和隱藏功能,需要的朋友參考下吧2017-12-12