Über den Code zur Verwendung eines modalen Popup-Fensters in Kombination mit Gridview in yii2

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung modaler Popup-Fenster in Yii2 in Kombination mit Gridview vorgestellt.

Im vorherigen Artikel habe ich die Verwendung modaler Popups vorgestellt -up-Fenster in Yii2 (Grundlegende Verwendung), nehmen Sie die Erstellung als Beispiel.

In der tatsächlichen Entwicklung stoßen wir häufig auf Situationen, in denen Modal zum Ändern der Daten auf der Listenseite verwendet wird. Wenn es sich um eine allgemeine Schleifenanzeige handelt, können die meisten Leute sie meines Erachtens bedienen, nachdem sie die grundlegende Verwendung von Modal gesehen haben. Aber in Kombination mit Gridview wird es geschätzt. Einige Leute können es einfach nicht mehr ertragen. Mal sehen, wie wir dieses Problem lösen können!

1. Fügen Sie der Gridview-Operation eine Schaltfläche [Aktualisieren] hinzu und geben Sie den Wert der Datenzielklasse und der Daten-ID an

[
'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 für Aktualisierung hinzufügen

<?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. Ändern Sie unsere Aktualisierungsmethode

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

Es ist ersichtlich, dass sich der gesamte Prozess nicht von der zuvor erwähnten grundlegenden Verwendung von Modal unterscheidet. Aber es ist noch nicht vorbei. Ich glaube, dass die meisten Menschen auf die folgenden häufigen Probleme stoßen, die schwer zu lösen sind:

Select2 wird im yii2-Modal verwendet ?

yii2 Mehrere Modalitäten auf einer einzigen Seite. Warum teilen sich die Seiten eine Seite und warten, bis die Daten geladen sind?

yii2 Eine einzelne Seite hat mehrere Modalitäten, wenn Sie oben eine einzelne Seite hinzufügen und die Rasteransicht aktualisieren. Warum wird die aktualisierte Auswahl2 ungültig und unwirksam?

Sehen wir uns an, wie Sie diese Probleme einzeln lösen können:

Zunächst müssen Sie für die erste Frage nur den Tabindex der Optionsoption angeben, wenn modale Verwendungen beginnen. Setzen Sie es einfach auf „false“, siehe Folgendes:

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

Das zweite und dritte Problem werden durch die Verwendung mehrerer Modalitäten auf einer einzelnen Seite verursacht. Um das Problem zu veranschaulichen, verwenden wir modal sowohl in der Schaltfläche [Erstellen] in einer Liste als auch in der Schaltfläche [Aktualisieren] in der Rasteransicht. Gemäß der Verwendung modaler Popups in Yii2 (grundlegende Verwendung) und diesem Artikel wird das erste Problem offensichtlich durch

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

verursacht Nachdem wir das Modal zum ersten Mal verwendet haben, werden den Körpern aller Modals Werte zugewiesen, sodass bei späterer Verwendung anderer Modalitäten derselbe Inhalt angezeigt wird, bevor die Daten angefordert werden. Um dieses Problem zu lösen, müssen Sie dem jeweiligen Modal-Body lediglich nach jeder asynchronen Anfrage einen separaten Wert zuweisen. Der Code kann wie folgt bezeichnet werden:

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

Siehe letzte Frage. Schüler, die select2 verwendet haben, sollten aufpassen! ! !

Wenn das Formular, wie im in diesem Thema vorgestellten Beispiel, „select2“ enthält, führt dies dazu, dass das Feld „select2“ nur während der Operation [Erstellen] normal ist und das Feld „select2“ während der Operation [ Update]-Vorgang!

Dies wird tatsächlich durch die ID verursacht, die demselben select2 auf derselben Seite entspricht. Um dieses Problem zu lösen, müssen Sie nur alle vorhandenen Formularelemente auf der Seite vor jeder asynchronen Datenanforderung entfernen. Schauen Sie sich die spezifische Implementierung an:

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

Das Obige ist der gesamte Inhalt dieses Artikels, der für das Lernen aller hilfreich sein wird. Bitte achten Sie auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Über Yiis Modellabfrage basierend auf Arrays und Objekten

Yii und CKEditor implementieren die Bild-Upload-Funktion

So durchsuchen Sie mehrere Felder gleichzeitig in Yii2

Das obige ist der detaillierte Inhalt vonÜber den Code zur Verwendung eines modalen Popup-Fensters in Kombination mit Gridview in yii2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!