이 글에서는 그리드뷰와 결합된 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([ '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); } ); });
$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 중국어 웹사이트의 기타 관련 기사를 참조하세요!