yii2에서 그리드뷰와 함께 모달 팝업 창을 사용하는 코드에 대해

이 글에서는 그리드뷰와 결합된 Yii2의 모달 팝업창 사용법에 대한 관련 정보를 주로 소개하고 있으니, 필요하신 분들은 참고하시면 됩니다.

이전 글에서는 모달 팝업창 사용법을 소개해드렸는데요. Yii2(기본 사용)에서, 즉 예제 만들기를 사용합니다.

실제 개발에서 목록 페이지의 데이터를 수정하기 위해 모달을 사용하는 경우가 종종 있습니다. 일반적인 루프 표시라면 대부분의 사람들이 모달의 기본 사용법을 보고 조작할 수 있다고 생각하지만 그리드뷰와 결합됩니다. , 일부 사람들은 시작할 수도 있습니다. 너무 많습니다. 이 문제를 해결하는 방법을 살펴 보겠습니다!

1.gridview 작업에 [업데이트] 버튼을 추가하고 데이터 전환 데이터 대상 클래스와 데이터 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.

<?php 
use yii\bootstrap\Modal;
// 更新操作
Modal::begin([
&#39;id&#39; => &#39;update-modal&#39;,
&#39;header&#39; => &#39;<h4 id="更新">更新</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. 업데이트 방법 수정

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

보시다시피 전체 과정에서 이전의 기본 사용 모달은 별 차이가 없습니다. 하지만 여기서 끝나지 않습니다. 대부분의 사람들이 해결하기 어려운 다음과 같은 일반적인 문제에 직면할 수 있다고 생각합니다.

Select2가 yii2 모달에서 사용되는 이유는 무엇입니까? yii2 단일 페이지에 여러 모달이 있는 이유는 페이지가 한 페이지를 공유하고 데이터가 로드될 때까지 기다리는 이유는 무엇입니까?

yii2 단일 페이지에 여러 개의 모달이 있습니다. 단일 페이지를 추가하고 위의 그리드뷰를 업데이트할 때 모달을 예로 들어보겠습니다. select2를 사용할 때 업데이트된 select2가 유효하지 않게 되고 무효화되는 이유는 무엇입니까?

이러한 문제를 하나씩 해결하는 방법을 살펴보겠습니다.

우선 모달이 시작을 사용할 때 옵션 옵션의 tabindex를 false로 지정하면 됩니다.

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

두 번째와 세 번째 문제는 단일 페이지에서 여러 모달을 사용하여 발생합니다. 문제를 설명하기 위해 목록의 [만들기] 버튼과 그리드 뷰의 [업데이트] 버튼 모두에 모달을 사용합니다. Yii2(기본 사용)에서 모달 팝업을 사용하는 방법과 이 기사에 따르면 첫 번째 문제는 분명히

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

, 여러 모달에 의해 발생하며, 처음 모달을 사용한 후 값이 할당됩니다. 나중에 다른 모달을 사용할 때 데이터가 요청되기 전에 동일한 내용이 표시되도록 모든 모달의 본문에 추가합니다. 이 문제를 해결하려면 각 비동기 요청 후에 해당 모달 본문에 별도의 값을 할당하기만 하면 됩니다. 코드는 다음과 같이 참조할 수 있습니다.

$('#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는 주의를 기울여야 합니다! ! !

이 주제에 소개된 예와 같이 양식에 select2가 포함된 경우 select2 필드는 [만들기] 작업 중에만 "숨겨지고" select2 필드는 [업데이트] 중에 "숨겨집니다" 작업!

이 문제는 실제로 동일한 페이지의 동일한 select2에 해당하는 ID로 인해 발생합니다. 이 문제를 해결하려면 각 비동기 데이터 요청 전에 페이지의 기존 양식 항목을 모두 제거하기만 하면 됩니다. 구체적인 구현을 살펴보세요:

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

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 권장 사항:

Yii의 배열 및 객체 기반 모델 쿼리 정보

Yii와 CKEditor는 이미지 업로드 기능을 구현합니다

Yii2가 동시에 여러 필드를 검색하는 방법

위 내용은 yii2에서 그리드뷰와 함께 모달 팝업 창을 사용하는 코드에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!