ग्रिडव्यू व्यू और अपडेट बटन पर वाईआई 2 मॉडल डायलॉग को कैसे कार्यान्वित करें?

Question

मैं प्रत्येक ग्रिडव्यू पर Yii2 मोडल संवाद बॉक्स को कार्यान्वित करना चाहता हूं, जब प्रत्येक पंक्ति पर बटन को क्लिक या अपडेट किया जाता है।

क्या कोई भी कृपया इसे लागू करने के तरीके पर सलाह दे सकता है?

arogachev से सलाह के साथ: यह, मेरे कोड पर एक अद्यतन

<?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

सबसे पहले आप को देखने के लिंक, नहीं आईडी को वर्ग जोड़ना चाहिए है के बाद से वहाँ एक से अधिक कर रहे हैं तत्व:

विकल्पों में

बदलें:

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

और जेएस में:

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

आप संबंधित माता-पिता tr से तत्व आईडी निकाल सकते हैं। यह data-key विशेषता में संग्रहीत है।

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

ध्यान दें कि समग्र प्राथमिक कुंजी के मामले में यह ऑब्जेक्ट होगा, स्ट्रिंग/संख्या नहीं।

एक बार जब आप आईडी प्राप्त करते हैं, तो AJAX के साथ मॉडल के अनुसार लोड करें और मोडल बॉडी में सामग्री डालें। नियंत्रक में संबंधित विधि के

उदाहरण:

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

AJAX कॉल का उदाहरण:

$(".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

यहाँ कैसे मैं इस का दरवाजा खटखटाया है।

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

अगला आपके विचार फाइल करने के लिए निम्नलिखित जोड़ें:: इस प्रकार पहले मैं ग्रिड दृश्य में बटन बनाया

use yii\bootstrap\Modal; 

और अनुभाग जो आपके मोडल सामग्री पकड़ होगा जोड़ने

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

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

    Modal::end(); 
?> 

अब क्लिक ईवेंट को संभालने और AJAX कॉल करने के लिए आपको जावास्क्रिप्ट (इस मामले में jQuery) की आवश्यकता है। मैं तो जैसे @ वेब/लिपियों फ़ोल्डर फ़ाइल एक mymodal.js बनाया:

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

कि आपके gridview होस्ट करता है दृश्य फाइल करने के लिए इस फ़ाइल को जोड़ें।

registerJsFile ('@ वेब/scripts/mymodal.js', [ 'निर्भर करता है' => [\ Yii \ वेब \ JqueryAsset :: className()]]);?>

यह सब छोड़ दिया है सेटअप करने के लिए है वह क्रिया जो आपके AJAX अनुरोध को संभालेगी। ExampleController.php में (ऊपर gridview बटन में सेटअप से निम्न) निम्नलिखित कार्रवाई जोड़ें: इस तुम सिर्फ यकीन है कि आप अपने अद्यतन है बनाने की जरूरत है के बाद

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

।मॉडल फॉर्म के साथ PHP दृश्य फ़ाइल सेटअप और सबमिट बटन और जाने के लिए आपका अच्छा है।