Yii2-在jQuery上为GridView交换ListView。单击（）

我有一个ListView，是我自己创建的。我有一个GridView，使用

kartik\grid\GridView

两者在相应的页面上都可以很好地工作。它们使用相同的参数，例如

$dataProvider

和

$searchModel

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

---

我尝试了不同的ID、不同的数据提供等等，但都没有用。也许我采取了错误的方法？有什么想法吗？

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

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

及

---

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

\u list\u item

：

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

尝试以下操作：

在

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']),
],

“面板”=>[
'showFooter'=>false，
//您可能需要的其他设置
'heading'=>''.Yii:：t（'app/buttons'，'list'）.$title'，
'type'=>'success'，
//'在'=>Html:：a（'''.Yii:：t（'app/buttons'，'create'），['create']，['class'=>'btn成功']）之前，
//'在'=>Html:：a（'''.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
],

“寻呼机”=>[
'options'=>['class'=>'pagination']，//设置分页ui列表中使用的类名
'prevPageLabel'=>''，//设置“上一页”按钮的标签
'nextPageLabel'=>''，//设置“下一页”按钮的标签
'firstPageLabel'=>''，//设置“第一页”按钮的标签
'lastPageLabel'=>''，//设置“最后一页”按钮的标签
'nextPageCssClass'=>'next'，//为“next”页面按钮设置CSS类
'prevPageCssClass'=>'prev'，//为“上一页”按钮设置CSS类
'firstPageCssClass'=>'first'，//为“first”页面按钮设置CSS类
'lastPageCssClass'=>'last'，//为“last”页面按钮设置CSS类
“maxButtonCount”=>10，//设置可显示的最大页面按钮数
],

---

此外，您不必设置

\yii\widgets\Pjax:：begin（）

和

\yii\widgets\Pjax:：end（）

因为

kartik\grid\GridView

默认使用

Pjax

。

使用Chrome开发者工具，我得到一个完全空白的控制台-没有任何错误。那么，使用这两个小部件（listview和GridView一起使用）会有什么错误/问题？在文件中，无论哪一个是第二个，我都没有分页按钮。这很奇怪，因为分页按钮是html而不是在运行时创建的（使用javascript）。Yii 2默认GridView也会出现这种情况吗？显然，我也需要为

GridView

使用

$gridDataProvider

。

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

'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
],