Question

我有一个ListView，我自己创建。我有一个GridView，使用kartik\grid\GridView。

两者都在相应的页面上正常工作。它们使用相同的参数，例如$dataProvider和$searchModel。

<div id="grid">
    <?= GridView::widget([....]); ?>
</div>

和

<div id="list">
    <?= ListView::widget([....]); ?>
</div>

问题是，当我把它们放在同一页面上时，第二个会丢失它的交互性 - 比如分页等。我有一个jQuery.click（）按钮来替换ListView的GridView，但它没有工作。

$("#presentation-switcher").click(function() {
    $("#data-view").load("_list.php");
});

我已尝试过不同的ID，不同的数据驱动等，但无济于事。也许我采取了错误的做法？有什么想法吗？

Answer 1

您可以尝试将GridView和ListView小部件放在Pjax中，例如：

\yii\widgets\Pjax::begin(); 
      echo GridView::widget([
      ]); 
\yii\widgets\Pjax::end();

和

\yii\widgets\Pjax::begin(); 
      echo ListView::widget([
      ]); 
\yii\widgets\Pjax::end();

Answer 2

设置项目视图的新页面，如_list_item：

<?= 
ListView::widget([
    'dataProvider' => $listDataProvider,
    'options' => [
        'tag' => 'div',
        'class' => 'list-wrapper',
        'id' => 'list-wrapper',
    ],
    'layout' => "{pager}\n{items}\n{summary}",
    'itemView' => '_list_item',
]);
?>

More Detail

Answer 3

尝试以下方法：

在GridView集showFooter中false：

'panel' => [
    'showFooter' => false,
    //Other settings you may wan

    'heading' => '<h3 class="panel-title"><i class="iconLeft fa fa-th-list"></i> '.Yii::t('app/buttons', 'list').' '.$title.'</h3>',
    'type' => 'success',
    //'before' => Html::a('<i class="iconLeft fa fa-plus"></i> '.Yii::t('app/buttons', 'create'), ['create'], ['class' => 'btn btn-success']),
    //'after' => Html::a('<i class="iconLeft fa fa-repeat"></i> '.Yii::t('app/buttons', 'reset_grid'), ['index'], ['class' => 'btn btn-info']),
],

然后明确添加寻呼机选项：

'pager' => [
    'options' => ['class' => 'pagination'],   // set class name used in ui list of pagination
    'prevPageLabel' => '<i class="fa fa-angle-left"></i>',   // Set the label for the "previous" page button
    'nextPageLabel' => '<i class="fa fa-angle-right"></i>',   // Set the label for the "next" page button
    'firstPageLabel' => '<i class="fa fa-angle-double-left"></i>',   // Set the label for the "first" page button
    'lastPageLabel' => '<i class="fa fa-angle-double-right"></i>',    // Set the label for the "last" page button
    'nextPageCssClass' => 'next',    // Set CSS class for the "next" page button
    'prevPageCssClass' => 'prev',    // Set CSS class for the "previous" page button
    'firstPageCssClass' => 'first',    // Set CSS class for the "first" page button
    'lastPageCssClass' => 'last',    // Set CSS class for the "last" page button
    'maxButtonCount' => 10,    // Set maximum number of page buttons that can be displayed
],

此外，您不必设置\yii\widgets\Pjax::begin();和\yii\widgets\Pjax::end();，因为kartik\grid\GridView默认使用Pjax。

Yii2 - 在jQuery.click（）上交换GridView的ListView

3 个答案: