在上篇文章給大家介紹了Yii2中如何使用modal彈窗(基本使用)，即以創(chuàng)建為例。

實(shí)際開(kāi)發(fā)中，我們往往還會(huì)遇到列表頁(yè)數(shù)據(jù)修改要使用modal的情況，如果是一般的循環(huán)展示，相信大多數(shù)人看了modal的基本使用都會(huì)操作，但是結(jié)合gridview估計(jì)有些人就開(kāi)始吃不消了，我們看看如何解決這個(gè)問(wèn)題！

1、gridview的操作增加[更新]按鈕，并指定data-toggle data-target html' target='_blank'>class以及data-id的值

[ class = yii/grid/ActionColumn , template = {update} ,  buttons = [ update = function ($url, $model, $key) {return Html::a( 更新 , # , [ data-toggle = modal , data-target = #update-modal , class = data-update , data-id = $key,],

2、為更新添加modal

 ?php use yii/bootstrap/Modal;// 更新操作Modal::begin([ id = update-modal , header = h4 >
JS;
$this- registerJs($updateJs);Modal::end();? 
3、修改我們的update方法
public function actionUpdate($id)$model = $this- findModel($id);if ($model- load(Yii::$app- request- post()) $model- save()) {return $this- redirect([ index } else {return $this- renderAjax( update , [ model = $model,}
可以看出整個(gè)過(guò)程中跟我們之前說(shuō)的modal基本使用沒(méi)什么差別。但是到此并沒(méi)有結(jié)束，相信大多數(shù)人可能會(huì)遇到下面常見(jiàn)的幾個(gè)難以解決的問(wèn)題：
yii2 modal中使用了select2 為什么搜索框不可搜索？
yii2 單個(gè)頁(yè)面多個(gè)modal 為什么頁(yè)面會(huì)共用一個(gè)，等數(shù)據(jù)加載完了才好？
yii2 單個(gè)頁(yè)面多個(gè)modal，以單個(gè)頁(yè)面添加和我們上面的gridview更新均使用modal為例，當(dāng)使用select2時(shí)，為什么更新的select2會(huì)失效不起作用？
下面我們看如何一個(gè)一個(gè)的解決掉這些問(wèn)題：
首先第一個(gè)問(wèn)題，你只需要在modal使用begin的時(shí)候指定options選項(xiàng)的tabindex為false即可，參考如下：
Modal::begin([// ...... options = [ tabindex = false ]);
第二個(gè)和第三個(gè)問(wèn)題，都是在單個(gè)頁(yè)面中使用多個(gè)modal所引起的，為了說(shuō)明問(wèn)題，我們?cè)谀沉斜韮?nèi)[創(chuàng)建]按鈕和gridview中[更新]按鈕中均使用modal。按照我們Yii2中如何使用modal彈窗(基本使用)和本篇文章所述，第一個(gè)問(wèn)題很明顯是
$( .modal-body ).html(data);
所引起的，多個(gè)modal，在我們第一次使用modal之后給所有modal的body賦值了，以至于在后面使用其他modal時(shí)，在未請(qǐng)求到數(shù)據(jù)之前均顯示相同內(nèi)容的bug。解決該問(wèn)題只需要在每次異步請(qǐng)求之后對(duì)各自的modal-body單獨(dú)賦值即可，代碼可參考如下：
$( #create ).on( click , function () {$.get( url , {},function (data) {$( #create-modal ).find( .modal-body ).html(data);// $( .modal-body ).html(data);$( .data-update ).on( click , function () {$.get( {$requestUpdateUrl} , { id: $(this).closest( tr ).data( key ) },function (data) {$( #update-modal ).find( .modal-body ).html(data);// $( .modal-body ).html(data);});
看最后一個(gè)問(wèn)題，使用過(guò)select2的同學(xué)要注意了！！！
如果說(shuō)像我們本篇主題所介紹的例子這樣，form中帶select2的話，就會(huì)導(dǎo)致僅僅在[創(chuàng)建]時(shí)select2正常，[更新]操作時(shí)select2字段“隱藏”的效果！
這其實(shí)是同一頁(yè)面相同select2對(duì)應(yīng)的id導(dǎo)致的，解決該問(wèn)題只需要在每次異步請(qǐng)求數(shù)據(jù)之前，移除掉頁(yè)面上所有已存在的表單項(xiàng)即可。看具體實(shí)現(xiàn)：
$( #create ).on( click , function () {// 有效避免multiply modal select2的問(wèn)題// 移除異步加載過(guò)來(lái)的form表單$( .document-nav-form ).remove();$.get( {$requestUrl} , {},function (data) {$( #create-modal ).find( .modal-body ).html(data);$( .data-update ).on( click , function () {// 有效避免multiply modal select2的問(wèn)題// 移除異步加載過(guò)來(lái)的form表單$( .document-nav-form ).remove();$.get( {$requestUpdateUrl} , { id: $(this).closest( tr ).data( key ) },function (data) {$( #update-modal ).find( .modal-body ).html(data);});
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP ！
相關(guān)推薦：
關(guān)于Yii基于數(shù)組和對(duì)象的Model查詢
Yii和CKEditor實(shí)現(xiàn)圖片上傳的功能
Yii2如何實(shí)現(xiàn)同時(shí)搜索多個(gè)字段
以上就是關(guān)于yii2中結(jié)合gridview使用modal彈窗的代碼的詳細(xì)內(nèi)容，PHP教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。