yii2 ListView 用法记录

Posted 2022-11-21 sjg20010414

yii2当前默认使用bootstrap4，这一点从 AppAsset 的 $depends 可以找到。

ListView 默认的页面导航太过简陋，是几乎什么“调味料”都不加的状态，如下：

要让页面导航美观一些，需要配置 ListView 的 pager 属性 （即对应 类yii\\widgets\\LinkPager 的对应属性 的数组）。对于 disabled 的按钮 （例如已经在第一页，前一页按钮就是 disabled，如果显示首页、尾页按钮，那么已经在头尾，相应按钮也是 disabled），有2种处理方式：要么让文本显示为灰色，要么干脆对应按钮隐藏掉。

 

        'pager' => [
            'maxButtonCount' => 15,                 // 默认是10个页码，可以自己指定
            'firstPageLabel' => '首页',               // 不设置首页、尾页定位到首尾页比较麻烦
            'lastPageLabel' => '尾页',
            'pageCssClass' => 'page-item',          // <li class="page-item"> 激活的才有背景色
            //'disabledListItemSubTagOptions' => ['tag' => 'div', 'class' => 'page-link text-muted'],
            'disabledPageCssClass' => 'd-none',     // 已经到首页或尾页时，相应按钮不显示。禁用此行则应启用上一行
            'linkOptions' => ['class' => 'page-link'],      // <a class="page-link"> 带边框
            'options' => ['class' => 'pagination mt-4']     // 避免导航条与上部挨太紧
        ]

下面是 blogDemo 用 ListView 显示的例子：

    <?= ListView::widget([
        'dataProvider' => $dataProvider,
        'layout' => "summary\\n<div class=\\"row\\">items</div>\\npager",  // ListView容器内的布局
        'itemOptions' => ['class' => 'col-lg-3 py-2'],      // 分部视图外部容器
//        'itemView' => function ($model, $key, $index, $widget) 
//            return html::a(Html::encode($model->title), ['view', 'id' => $model->id]);
//        ,
        'itemView' => '_post',      // 用独立分部视图而非回调函数来渲染每个项目
        'pager' => [
            'maxButtonCount' => 15,                 // 默认是10个页码，可以自己指定
            'firstPageLabel' => '首页',               // 不设置首页、尾页定位到首尾页比较麻烦
            'lastPageLabel' => '尾页',
            'pageCssClass' => 'page-item',          // <li class="page-item"> 激活的才有背景色
            //'disabledListItemSubTagOptions' => ['tag' => 'div', 'class' => 'page-link text-muted'],
            'disabledPageCssClass' => 'd-none',     // 已经到首页或尾页时，相应按钮不显示。禁用此行则应启用上一行
            'linkOptions' => ['class' => 'page-link'],      // <a class="page-link"> 带边框
            'options' => ['class' => 'pagination mt-4']     // 避免导航条与上部挨太紧
        ]

    ]) ?>

_post.php 如下：

<?php

/* @var $this yii\\web\\View */
/* @var $model app\\models\\Post */

use app\\models\\Post;
use yii\\bootstrap4\\Html;

?>

<div class="item">
    <h4 class="bg-warning"><?= $model->title ?></h4>
    <div><?= $model->body ?></div>
</div>

效果如下：