À propos du code d'utilisation de la fenêtre contextuelle modale en combinaison avec GridView dans yii2

Cet article présente principalement les informations pertinentes sur la façon d'utiliser les fenêtres contextuelles modales dans Yii2 combinées avec GridView. Les amis qui en ont besoin peuvent s'y référer

Dans l'article précédent, j'ai présenté comment utiliser le modal. fenêtres contextuelles dans Yii2 (utilisation de base), prenons la création comme exemple.

Dans le développement réel, nous rencontrons souvent des situations où le modal est utilisé pour modifier les données sur la page de liste. S'il s'agit d'un affichage général en boucle, je pense que la plupart des gens peuvent l'utiliser après avoir vu l'utilisation de base du modal, mais combiné avec GridView, on estime que certaines personnes n'en peuvent tout simplement plus, voyons comment résoudre ce problème !

1. Ajoutez un bouton [Mettre à jour] à l'opération GridView et spécifiez la classe de cible de données et la valeur d'identifiant de données

[
'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. Ajouter un modal pour la mise à jour

<?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="#" class="btn btn-primary" data-dismiss="modal">Close</a>&#39;,
]); 
$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);
Modal::end();
?>

3. Modifier notre méthode de mise à jour

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

On peut voir que l'ensemble du processus n'est pas différent de l'utilisation de base du modal que nous avons mentionné précédemment. Mais ce n'est pas fini ici. Je pense que la plupart des gens peuvent rencontrer les problèmes courants suivants qui sont difficiles à résoudre :

Select2 est utilisé dans le modal yii2. Pourquoi le champ de recherche n'est-il pas consultable. ?

yii2 Plusieurs modaux sur une seule page Pourquoi les pages partagent-elles une page et attendent que les données soient chargées ?

yii2 Une seule page a plusieurs modaux. Prenez modal comme exemple pour ajouter une seule page et mettre à jour la vue en grille ci-dessus. Lors de l'utilisation de select2, pourquoi le select2 mis à jour devient-il invalide et inefficace ?

Voyons comment résoudre ces problèmes un par un :

Tout d'abord, pour le premier problème, il vous suffit de spécifier le tabindex de l'option options lorsque les utilisations modales commencent. Réglez-le simplement sur false, reportez-vous à ce qui suit :

Modal::begin([
// ......
'options' => [
'tabindex' => false 
],
]);

Les deuxième et troisième problèmes sont causés par l'utilisation de plusieurs modaux en un seul. Oui, afin d'illustrer le problème, nous utilisons modal à la fois dans le bouton [Créer] dans une liste et dans le bouton [Mettre à jour] dans la vue en grille. D'après la façon dont nous utilisons les pop-ups modaux dans Yii2 (utilisation de base) et cet article, le premier problème est évidemment causé par

$('.modal-body').html(data);

Oui, là sont plusieurs modaux. Après avoir utilisé le modal pour la première fois, des valeurs sont attribuées aux corps de tous les modaux, de sorte que lorsque nous utiliserons d'autres modaux plus tard, le même bug de contenu sera affiché avant que les données ne soient demandées. Pour résoudre ce problème, il vous suffit d'attribuer des valeurs au corps modal respectif séparément après chaque requête asynchrone. Le code peut être référencé comme suit :

$('#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);
} 
);
});

<. 🎜>

Voir la fin Une question, les étudiants ayant utilisé select2 doivent faire attention ! ! !

Si, comme l'exemple présenté dans cette rubrique, le formulaire contient select2, le champ select2 sera normal uniquement pendant l'opération [Créer], et le champ select2 sera "caché" pendant le [ Mise à jour] opération !

Cela est en fait dû à l'ID correspondant au même select2 sur la même page. Pour résoudre ce problème, il vous suffit de supprimer tous les éléments de formulaire existants sur la page avant chaque demande de données asynchrone. Regardez la mise en œuvre spécifique :

$('#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);
} 
);
});

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun pour en savoir plus. contenu, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la requête de modèle de Yii basée sur des tableaux et des objets

Yii et CKEditor implémentent la fonction de téléchargement d'images

Comment rechercher plusieurs champs en même temps dans Yii2

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!