Làm thế nào để thực hiện Hộp thoại Modal Yii2 trên chế độ xem GridView và nút cập nhật?

Question

Tôi muốn thực hiện hộp thoại phương thức Yii2 trên GridView của tôi khi xem hoặc cập nhật nút được nhấp vào mỗi hàng.

Có ai vui lòng tư vấn về cách triển khai không?

Với lời khuyên từ arogachev: Đây là một bản cập nhật về mã của tôi

<?php 

//var_dump($dataProvider); 
$gridColumns = [ 
    [ 
     'format' => 'html', 
     'attribute' => 'avatar', 
     'label'=>'Image', 
     'headerOptions' => ['width' => '80%',],  
    ], 

    [ 'class' => 'yii\grid\ActionColumn', 
     'template' => '{view} {delete}', 
     'headerOptions' => ['width' => '20%', 'class' => 'activity-view-link',],   
      'contentOptions' => ['class' => 'padding-left-5px'], 

     'buttons' => [ 
      'view' => function ($url, $model, $key) { 
       return Html::a('<span class="glyphicon glyphicon-eye-open"></span>','#', [ 
        'id' => 'activity-view-link', 
        'title' => Yii::t('yii', 'View'), 
        'data-toggle' => 'modal', 
        'data-target' => '#activity-modal', 
        'data-id' => $key, 
        'data-pjax' => '0', 

       ]); 
      }, 
     ], 


    ], 

]; 
?> 


<?php 

Pjax::begin(); 

echo \kartik\grid\GridView::widget([ 
    'dataProvider' => $dataProvider, 
    'columns'=>$gridColumns, 
    'summary'=>false, 
    'responsive'=>true, 
    'hover'=>true 
]); 
Pjax::end(); 

?>  


<?php $this->registerJs(
    "$('.activity-view-link').click(function() { 
    $.get(
     'imgview',   
     { 
      id: $(this).closest('tr').data('key') 
     }, 
     function (data) { 
      $('.modal-body').html(data); 
      $('#activity-modal').modal(); 
     } 
    ); 
}); 
    " 
); ?> 

<?php 


?> 

<?php Modal::begin([ 
    'id' => 'activity-modal', 
    'header' => '<h4 class="modal-title">View Image</h4>', 
    'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>', 

]); ?> 

<div class="well"> 


</div> 


<?php Modal::end(); ?> 

Answer 1

Trước hết bạn nên thêm lớp vào link xem, không id, kể từ khi có nhiều hơn một yếu tố:

Thay đổi tùy chọn:

'class' => 'activity-view-link', 

Và trong JS:

$('.activity-view-link').click(function() { 

Bạn có thể trích xuất id phần tử từ cha mẹ tương ứng tr. Nó được lưu trữ trong thuộc tính data-key.

$('.activity-view-link').click(function() { 
    var elementId = $(this).closest('tr').data('key'); 
} 

Lưu ý rằng trong trường hợp các khóa chính hỗn hợp, nó sẽ là đối tượng chứ không phải là chuỗi/số.

Khi bạn nhận được id, hãy tải theo mẫu với AJAX và chèn nội dung vào nội dung phương thức.

Ví dụ về phương pháp có liên quan trong điều khiển:

public function actionView($id) 
{ 
    $model = YourModel::findOne($id); 
    if (!$model) { 
     // Handle the case when model with given id does not exist 
    } 

    return $this->renderAjax('view', ['id' => $model->id]; 
} 

Ví dụ về AJAX gọi:

$(".activity-view-link").click(function() { 
    $.get(
     .../view // Add missing part of link here   
     { 
      id: $(this).closest('tr').data('key') 
     }, 
     function (data) { 
      $('.modal-body').html(data); 
      $('#activity-modal').modal(); 
     } 
    ); 
}); 

Answer 2

Dưới đây là cách tôi tiếp cận này. Đầu tiên tôi tạo ra các nút trong giao diện lưới như sau:

[ 
    'class' => 'yii\grid\ActionColumn', 
    'options'=>['class'=>'action-column'], 
    'template'=>'{update} {delete}', 
    'buttons'=>[ 
     'update' => function($url,$model,$key){ 
      $btn = Html::button("<span class='glyphicon glyphicon-pencil'></span>",[ 
       'value'=>Yii::$app->urlManager->createUrl('example/update?id='.$key), //<---- here is where you define the action that handles the ajax request 
       'class'=>'update-modal-click grid-action', 
       'data-toggle'=>'tooltip', 
       'data-placement'=>'bottom', 
       'title'=>'Update' 
      ]); 
      return $btn; 
     } 
    ] 
], 

Tiếp thêm dòng sau vào tập tin xem của bạn:

use yii\bootstrap\Modal; 

và thêm phần đó sẽ tổ chức nội dung phương thức của bạn

<?php 
    Modal::begin([ 
     'header'=>'<h4>Update Model</h4>', 
     'id'=>'update-modal', 
     'size'=>'modal-lg' 
    ]); 

    echo "<div id='updateModalContent'></div>"; 

    Modal::end(); 
?> 

Bây giờ bạn cần javascript (jQuery trong trường hợp này) để xử lý sự kiện bấm và thực hiện cuộc gọi ajax. Tôi đã tạo tệp mymodal.js trong tệp thư mục @ web/scripts như sau:

$(function() { 
    $('.update-modal-click').click(function() { 
     $('#update-modal') 
      .modal('show') 
      .find('#updateModalContent') 
      .load($(this).attr('value')); 
    }); 
}); 

Thêm tệp này vào tệp xem lưu trữ chế độ xem lưới của bạn.

registerJsFile ('@ web/scripts/mymodal.js', [ 'phụ thuộc' => [\ yii \ web \ JqueryAsset :: className()]]);?>

Tất cả điều này là trái là để thiết lập hành động sẽ xử lý yêu cầu ajax của bạn. Trong ExampleController.php (sau đây từ các thiết lập trong nút GridView trên) thêm các hành động sau đây:

public function actionUpdate($id) 
{ 
    $model = $this->findModel($id); 
    if ($model->load(Yii::$app->request->post()) && $model->validate()) { 
     //prepare model to save if necessary 
     $model->save(); 
     return $this->redirect(['index']); //<---This would return to the gridview once model is saved 
    } 
    return $this->renderAjax('update', [ 
     'model' => $model, 
    ]); 
} 

Sau này, bạn chỉ cần phải chắc chắn rằng bạn có cập nhật của bạn.php xem tập tin thiết lập với các hình thức mô hình và gửi nút và tốt của bạn để đi.