bootstrap modal+gridview實(shí)現(xiàn)彈出框效果
更新時(shí)間：2017年08月15日 16:38:49 作者：coderWilson
這篇文章主要介紹了bootstrap modal+gridview實(shí)現(xiàn)彈出框效果，gridview點(diǎn)擊更新彈出填寫信息表單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
項(xiàng)目需要在gridview的表單信息中點(diǎn)擊更新，彈出表單進(jìn)行操作，不需要跳轉(zhuǎn)。
1.在girdview中加入更新操作按鈕用來調(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中寫update
'model' => $model,
]);
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript獲取標(biāo)簽的幾種方式小結(jié)
本文主要介紹了JavaScript獲取標(biāo)簽的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了js實(shí)現(xiàn)漂浮回頂部按鈕的方法,實(shí)例分析了javascript實(shí)現(xiàn)返回頂部功能的樣式與動(dòng)態(tài)實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
JS實(shí)現(xiàn)控制表格行內(nèi)容垂直對(duì)齊的方法
這篇文章主要介紹了JS實(shí)現(xiàn)控制表格行內(nèi)容垂直對(duì)齊的方法,通過javascript的getElementById獲取元素并設(shè)置其相應(yīng)樣式來實(shí)現(xiàn)這一功能,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄钊肜斫釰S中的substr和substring。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-04
本文給大家介紹了JavaScript中的類型檢查的一些知識(shí)點(diǎn),整理的非常詳細(xì),推薦給大家,希望對(duì)大家學(xué)習(xí)JavaScript能夠所幫助2020-02-02
javascript寫一個(gè)ajax自動(dòng)攔截并下載數(shù)據(jù)代碼實(shí)例
這篇文章主要介紹了javascript寫一個(gè)ajax自動(dòng)攔截并下載數(shù)據(jù)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家介紹了JavaScript的節(jié)流與防抖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了javascript閉包功能與用法,結(jié)合具體實(shí)例形式深入淺出的分析了javascript中閉包的概念、功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
兼容火狐c(diǎn)ss控制超出部分用省略號(hào)代替2008-07-07
本文主要介紹了JavaScript去除字符串兩端空格的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03