yii2 - >對GridView的更新按鈕不搜索後工作還是在GridView控件更改分頁

Question

參考 Yii2 Modal Dialog on Gridview view and update button shows same content for both buttons 和 How to implement Yii2 Modal Dialog on Gridview view and update button?

我得到了模態對話框，從中單擊以正確的ID參數GridView的更新按鈕，從選定的模態對話框行。但是，當我在gridview上使用搜索和分頁時發生了問題。模態對話框似乎不工作了，模態對話框將通過點擊更新按鈕顯示，但ID參數與選定的行不匹配。說實話，看起來gridview並不知道registerJS了。任何人都可以建議如何解決這個問題？

<?php 
$gridColumns = [ 
     [ 
      //'class' => 'kartik\grid\EditableColumn', 
      'attribute' => 'branch_id', 
      'pageSummary' => true, 
     ], 
     [ 
     'class' => 'kartik\grid\ActionColumn', 
     'template' => '{update} {delete}', 
     'headerOptions' => ['width' => '20%', 'class' => 'activity-view-link',], 
     'contentOptions' => ['class' => 'padding-left-5px'], 

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

       ]); 
      }, 
     ], 


    ], 
];?> 

<?php Pjax::begin(); ?> 
<?php 
echo GridView::widget([ 

    'dataProvider' => $dataProvider, 
    'filterModel' => $searchModel, 
    'columns' => $gridColumns, 
    // 'containerOptions' => ['style'=>'overflow: auto'], // only set when $responsive = false 
    'headerRowOptions'=>['class'=>'kartik-sheet-style'], 
    'filterRowOptions'=>['class'=>'kartik-sheet-style'], 
    'pjax' => true, // pjax is set to always true for this demo 
    'pjaxSettings'=>[ 
     'neverTimeout'=>true, 
     'beforeGrid'=>'Branches Data', 
     'afterGrid'=>'My fancy content after.', 
     'enablePushState' => false, 
     'options' => ['id' => 'BranchesGrid'], 
    ], 
    'bordered' => true, 
    'striped' => true, 
    'condensed' => true, 
    'responsive' => true, 
    'hover' => true, 
    'floatHeader' => true, 
    'panel' => [ 
     'type' => GridView::TYPE_PRIMARY 
    ], 
]); 
?> 
<?php yii\widgets\Pjax::end() ?> 

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

' 

）; ？>

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

]）; ？>

Answer 1

發生這種情況是因爲您將JS中的單擊事件處理程序綁定到已經呈現的元素。所以這個處理程序隻影響第一頁上的元素。在任何ajax更新之後，這些元素都會消失。您需要在每次更新pjax後重新激活您的點擊處理程序。

<?php Pjax::begin(['id'=>'some_pjax_id']); ?> 
<?php 
echo GridView::widget([ 

    'dataProvider' => $dataProvider, 
    'filterModel' => $searchModel, 
    'columns' => $gridColumns, 
    // 'containerOptions' => ['style'=>'overflow: auto'], // only set when $responsive = false 
    'headerRowOptions'=>['class'=>'kartik-sheet-style'], 
    'filterRowOptions'=>['class'=>'kartik-sheet-style'], 
    'pjax' => true, // pjax is set to always true for this demo 
    'pjaxSettings'=>[ 
     'neverTimeout'=>true, 
     'beforeGrid'=>'Branches Data', 
     'afterGrid'=>'My fancy content after.', 
     'enablePushState' => false, 
     'options' => ['id' => 'BranchesGrid'], 
    ], 
    'bordered' => true, 
    'striped' => true, 
    'condensed' => true, 
    'responsive' => true, 
    'hover' => true, 
    'floatHeader' => true, 
    'panel' => [ 
     'type' => GridView::TYPE_PRIMARY 
    ], 
]); 
?> 
<?php yii\widgets\Pjax::end() ?> 

<?php $this->registerJs(
' 
function init_click_handlers(){ 
    $(".activity-view-link").click(function(e) { 
      var fID = $(this).closest("tr").data("key"); 
      $.get(
       "update", 
       { 
        id: fID 
       }, 
       function (data) 
       { 
        $("#activity-modal").find(".modal-body").html(data); 
        $(".modal-body").html(data); 
        $("#activity-modal").modal("show"); 
       } 
      ); 
     }); 

} 

init_click_handlers(); //first run 
$("#some_pjax_id").on("pjax:success", function() { 
    init_click_handlers(); //reactivate links in grid after pjax update 
}); 

');