[页面加载后每个GridView行中的Yii2调用操作

Question

我想知道是否可以在页面加载后通过ajax对GridView的每一行自动调用动作。

我现在所要做的就是通过单击按钮手动触发呼叫，已经正确返回了值。

这是我的GridView：

<?php Pjax::begin(['id' => 'payment-list-view-container', 'timeout' => 5000]); ?>
    <?= GridView::widget([
        'id' => 'payment-table',
        'dataProvider' => $dataProvider,
        'resizableColumns' => false,
        'tableOptions' => ['class' => 'table table-striped'],
        'pjax'=>true,
        'pjaxSettings' => [
            'options' => [
                'id' => 'payment-table',
                'enablePushState' => false,
            ],
        ],
        'columns' => [
            [
                'class' => 'kartik\grid\SerialColumn',
                'header' => 'No.',
            ],
            [
                'header' => 'Title',
                'attribute' => 'name',
            ],
            [
                'attribute' => 'date_start',
                'header' => 'Payment Date',
                'value' => function($model){
                    return Yii::$app->formatter->asDatetime($model->payment_date, "php:d F Y");
                }
            ],
            [
                'header' => 'Action',
                'format' => 'raw',
                'value' => function($model) use ($export_type){
                    return Html::a('Open', '',
                        [
                            'data-url'=>'/model/payment/check-status/id/'. $model->id . '?exportType=' . $export_type ,
                            'class'=>'check-payment-status'
                        ]);
                }
            ],
        ],
    ]); ?>
<?php Pjax::end(); ?>

这是我的js：

<?php
$js = <<<JS
    $(document).ready(function(){

        function checkStatus() {
            $(".check-payment-status").off().on("click", function(e){
                e.preventDefault();
                var url = $(this).attr("data-url");

                $.pjax.defaults.timeout = false;
                $.ajax({
                    url     : url,
                    type   : "post",
                    dataType: 'json',
                    success: function (response) {
                        // do something
                    }, error  : function () {
                        // do nothing
                    }
                });
            });
        }

        checkStatus();
    });
JS;

$this->registerJs($js);

我想我需要使用类似的东西，但仍然不知道如何实现它

$.each($('.check-payment-status'), function (i, el) {
                        //do something
                    });

所以我真的可以这样做吗？每行页面加载后自动调用该操作吗？

Answer 1

您需要做的就是触发按钮上的点击事件。

$(document).ready(function() {
    //bind the click handler
    $('.btn').on('click', function(e) {
        e.preventDefault();
        console.log("Clicked " + $(this).text());
    });
    
    //click each button
    $('.btn').each(function() {
        $(this).trigger('click');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="btn">Link 1</a><br>
<a href="#" class="btn">Link 2</a><br>
<a href="#" class="btn">Link 3</a><br>