更新kartik网格时隐藏加载程序

Question

我有一个每隔3秒更新一次的网格。一切正常，但问题是每次更新网格时，加载器（显示...加载）都会不断弹出。

这就是我的尝试：

  echo DynaGrid::widget([
    'columns' => $columns,
    'showPersonalize' => true,
    'options' => ['id' => 'trackyard'],
    'gridOptions' => [
        'options' => ['id' => 'assignsolicitation-inside'],
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'showPageSummary' => false,
        'pager' => [
            'firstPageLabel' => 'First',
            'lastPageLabel' => 'Last',
            'maxButtonCount' => 10,
        ],

        'toolbar' => [
            ['content' => '{dynagrid}'],
            '{export}',
            '{toggleData}'
        ],
        'pjax' => true,
        'pjaxSettings' => [
            'options' => [
                'id' => 'wod'
            ],],
        'bordered' => false,
        'striped' => true,
        'condensed' => true,
        'responsive' => true,
        'responsiveWrap' => false,
        'containerOptions' => ['style' => 'overflow:scroll'],
    ]
]);

?>

然后在我的网格之后：

<?php
  $script = <<< JS
function reloadgrid() {
var intervalID = setInterval(function() {
   $.pjax.reload({container:'#trackyard-pjax'});
}, 3000);
setTimeout(function() {
    clearInterval(intervalID);
}, 18000);
};

reloadgrid();
JS;
$this->registerJS($script, \yii\web\VIEW::POS_HEAD);
?>

如何隐藏装载机？

Answer 1

在您的小部件中使用此功能

'afterAjaxUpdate' => 'function(id) { $(\'.loader\').hide(); }'

希望能帮助你。

Answer 2

我发现我需要将loadingCssClass设置为false

那是

echo DynaGrid::widget([
'columns' => $columns,
'showPersonalize' => true,
'options' => ['id' => 'trackyard'],
'gridOptions' => [
    'options' => ['id' => 'assignsolicitation-inside'],
    ....


    'pjax' => true,
    'pjaxSettings' => [
        'options' => [
            'id' => 'wod'
        ],
      'loadingCssClass'=>false,  //this disables the loading thing

      ],
    .........
   ]
  ]);

 ?>

来自Kartik documentation here on pjax settings

Answer 3

用于exmp这个div si loader

<div class="loader"></div>

记录更新后

隐藏装载程序div

function(data) {
$('.loader').hide();
}