yii2中結合gridview如何使用modal彈窗實例代碼詳解，yii2gridview
Jul 06, 2016 pm 02:24 PM
yii2中結合gridview如何使用modal彈窗實例代碼詳解，yii2gridview
在上篇文章給大家介紹了Yii2中如何使用modal彈窗(基本使用)，即以創(chuàng)建為例。
實際開發(fā)中，我們往往還會遇到列表頁數(shù)據修改要使用modal的情況，如果是一般的循環(huán)展示，相信大多數(shù)人看了modal的基本使用都會操作，但是結合gridview估計有些人就開始吃不消了，我們看看如何解決這個問題！
1、gridview的操作增加[更新]按鈕，并指定data-toggle data-target 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 class="modal-title">更新</h4>',
'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>',
]);
$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); 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,
]);
}
}
可以看出整個過程中跟我們之前說的modal基本使用沒什么差別。但是到此并沒有結束，相信大多數(shù)人可能會遇到下面常見的幾個難以解決的問題：
yii2 modal中使用了select2 為什么搜索框不可搜索？
yii2 單個頁面多個modal 為什么頁面會共用一個，等數(shù)據加載完了才好？
yii2 單個頁面多個modal，以單個頁面添加和我們上面的gridview更新均使用modal為例，當使用select2時，為什么更新的select2會失效不起作用？
下面我們看如何一個一個的解決掉這些問題：
首先第一個問題，你只需要在modal使用begin的時候指定options選項的tabindex為false即可，參考如下：
Modal::begin([ // ...... 'options' => [ 'tabindex' => false ], ]);
第二個和第三個問題，都是在單個頁面中使用多個modal所引起的，為了說明問題，我們在某列表內[創(chuàng)建]按鈕和gridview中[更新]按鈕中均使用modal。按照我們Yii2中如何使用modal彈窗(基本使用)和本篇文章所述，第一個問題很明顯是
$('.modal-body').html(data);
所引起的，多個modal，在我們第一次使用modal之后給所有modal的body賦值了，以至于在后面使用其他modal時，在未請求到數(shù)據之前均顯示相同內容的bug。解決該問題只需要在每次異步請求之后對各自的modal-body單獨賦值即可，代碼可參考如下：
$('#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);
}
);
});
看最后一個問題，使用過select2的同學要注意了?。?！
如果說像我們本篇主題所介紹的例子這樣，form中帶select2的話，就會導致僅僅在[創(chuàng)建]時select2正常，[更新]操作時select2字段“隱藏”的效果！
這其實是同一頁面相同select2對應的id導致的，解決該問題只需要在每次異步請求數(shù)據之前，移除掉頁面上所有已存在的表單項即可?？淳唧w實現(xiàn)：
$('#create').on('click', function () {
// 有效避免multiply modal select2的問題
// 移除異步加載過來的form表單
$('.document-nav-form').remove();
$.get('{$requestUrl}', {},
function (data) {
$('#create-modal').find('.modal-body').html(data);
}
);
});
$('.data-update').on('click', function () {
// 有效避免multiply modal select2的問題
// 移除異步加載過來的form表單
$('.document-nav-form').remove();
$.get('{$requestUpdateUrl}', { id: $(this).closest('tr').data('key') },
function (data) {
$('#update-modal').find('.modal-body').html(data);
}
);
});
以上所述是小編給大家介紹的yii2中結合gridview如何使用modal彈窗實例代碼詳解的全部敘述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對幫客之家網站的支持！
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment supprimer jquery dans yii2
Feb 17, 2023 am 09:55 AM
Comment supprimer jquery de yii2?: 1. Modifiez le fichier AppAsset.php et commentez la valeur "yii\web\YiiAsset" dans la variable $depends?; 2. Modifiez le fichier main.php et ajoutez la configuration comme "'yii" sous le champ "components" \web\JqueryAsset' => ['js' => [],'sourcePath' => null,]," pour supprimer le script jquery.
Comment afficher les invites d'erreur dans yii2
Apr 18, 2025 pm 11:09 PM
Dans YII2, il existe deux fa?ons principales d'afficher des invites d'erreur. L'une consiste à utiliser yii :: $ app- & amp; gt; errorhandler- & amp; gt; exception () pour attraper et afficher automatiquement les erreurs lorsqu'une exception se produit. L'autre consiste à utiliser $ this- & amp; gt; adderror (), qui affiche une erreur lorsque la validation du modèle échoue et peut être accessible dans la vue via $ modèle- & amp; gt; getErrors (). Dans la vue, vous pouvez utiliser if ($ errors = $ modèle- & amp; gt; getErrors ())
Comment installer l'extension Redis à l'aide du framework YII2
May 26, 2023 pm 06:41 PM
1. Vous devez télécharger la version Windows de la branche principale de yii2-redis avec composer 2. Décompressez-la et copiez-la dans supplier/yiisoft 3. Ajoutez 'yiisoft/yii2-redis'=>array('name'=>'yiisoft vers extensions.php sous yiisoft /yii2-redis','version'=>'2.0.
Quelques exercices CTF sélectionnés vous aideront à apprendre le framework yii2?!
Feb 23, 2022 am 10:33 AM
Cet article vous présentera le framework yii2, partagera quelques exercices CTF et les utilisera pour apprendre le framework yii2. J'espère qu'il sera utile à tout le monde.
Que dois-je faire si le modal en réaction ne prend pas effet??
Dec 30, 2022 am 09:22 AM
La solution au modal dans React ne prend pas effet?: 1. Supprimez "<React.StrictMode>" dans le fichier "main.jsx"?; 2. Lorsque le composant modal est utilisé, ajoutez deux attributs "transitionName="" maskTransitionName à Modal =" ""?; 3. Mettez à niveau "ant-design".
Comment utiliser des widgets YII intégrés (par exemple, GridView, ListView, ActiveForm)?
Jul 24, 2025 am 01:00 AM
Dans le cadre YII, GridView, ListView et ActiveForm sont des composants importants pour la construction d'éléments de page. 1. GridView est utilisé pour afficher les données de la table, prend en charge la pagination, le tri et le filtrage, la configuration des colonnes via DataProvider et des colonnes et des tables de rendu; 2. ListView convient à l'affichage de la liste de mise en page flexible, utilisez ItemView pour personnaliser l'affichage de chaque enregistrement et contr?ler la structure globale via la mise en page; 3. ActiveForm est utilisé pour créer des formulaires de liaison du modèle, gérer automatiquement les invites de vérification et d'erreur, et prend en charge plusieurs types d'entrée et ajustements de mise en page. La ma?trise de ces widgets peut considérablement améliorer l'efficacité du développement et peut être personnalisée par configuration
Comment créer un composant modal ou de bo?te de dialogue dans Vue?
Aug 02, 2025 am 03:00 AM
Créez le composant modal.vue, utilisez l'API de composition pour définir les accessoires qui re?oivent ModelValue et Title, et utilisez EMIT pour déclencher l'événement Update: ModelValue pour obtenir une liaison bidirectionnelle du modèle V; 2. Utilisez l'emplacement pour distribuer du contenu dans le modèle, en prenant en charge la machine à sous par défaut et en en-tête et en bassin de fente nommés; 3. Utilisez @ click.f pour fermer la fenêtre contextuelle en cliquant sur le calque de masque; 4. Importez le modal dans le composant parent et utilisez Ref pour contr?ler l'écran et le masquer, et utilisez-le en combinaison avec V-model; 5. Les améliorations facultatives incluent l'écoute de la clé d'échappement, l'ajout d'animation de transition et de verrouillage de mise au point. Ce composant de bo?te modale a bon
Exemple popup modal CSS
Jul 28, 2025 am 04:33 AM
Utilisez Pure CSS pour implémenter des fenêtres pop-up modales pour contr?ler la case à cocher visible et cachée. 1. Utilisez l'entrée [Type = "Checkbox"] comme commutateur d'état; 2. Utiliser: coché .Modal pour contr?ler l'affichage des bo?tes modales; 3. Utilisez l'étiquette [pour] pour déclencher la vérification pour réaliser l'ouverture et la fermeture; 4. Ajouter une animation @keyframes pour réaliser l'effet pop-up fondu; 5. Le bouton Fermer ou la zone de clic masque dans la bo?te modale peut être lié à l'étiquette de contr?le caché. L'ensemble du processus ne nécessite pas de JavaScript, est très compatible et a une forte accessibilité, et convient aux pages statiques ou aux scénarios interactifs légers.
