如何实现Yii2 GridView的移动端响应式适配？

嘿，这个问题我之前帮好几个开发者解决过——Yii2原生的GridView确实没考虑移动端适配，小屏幕下表格要么横向滚动要么内容挤成一团。下面给你几个实用的方案，亲测有效：

方案1：使用kartik-v的响应式GridView扩展 #

这是最省心的办法，第三方扩展已经帮你封装好了所有响应式逻辑。

首先通过Composer安装扩展：

composer require kartik-v/yii2-grid "@dev"

然后替换你原来的GridView引用，改成kartik的组件，只需要开启responsive参数就行：

use kartik\grid\GridView;

echo GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'responsive' => true, // 开启响应式
    'responsiveWrap' => false, // 防止小屏幕下内容被过度拉伸
    'columns' => [
        // 你的列配置...
        ['class' => 'yii\grid\ActionColumn'],
    ],
]);

这个扩展会在移动端自动把表格转换成堆叠的卡片样式，每个列的表头会变成对应内容的标签，完全不用自己写CSS。

方案2：自定义CSS实现原生GridView响应式 #

如果不想引入第三方扩展，自己写CSS也能搞定。核心思路是在小屏幕下把表格从横向布局改成纵向堆叠，用伪元素显示表头内容。

首先给你的GridView添加一个自定义类：

echo \yii\grid\GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'tableOptions' => ['class' => 'table table-responsive-custom'], // 自定义类
    'columns' => [
        // 列配置...
    ],
]);

然后在你的CSS文件里添加媒体查询样式：

@media (max-width: 768px) {
    .table-responsive-custom thead {
        display: none; // 隐藏原生表头
    }

    .table-responsive-custom tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
    }

    .table-responsive-custom tbody td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    .table-responsive-custom tbody td::before {
        content: attr(data-label); // 用td的data-label属性显示表头
        position: absolute;
        left: 0;
        padding-left: 1rem;
        font-weight: bold;
        text-align: left;
    }
}

最后别忘了给每个GridView列添加data-label属性，对应表头文字：

[
    'attribute' => 'username',
    'contentOptions' => function ($model) {
        return ['data-label' => '用户名'];
    },
],

这个方法完全基于原生组件，灵活度高，但需要自己维护CSS样式。

方案3：移动端切换成列表视图 #

如果你的表格数据比较复杂，上面两种方案都不够理想，可以考虑在移动端直接把GridView换成列表布局。

你可以用Yii2的yii\web\UserAgent判断访问设备，然后输出不同的视图：

use yii\web\UserAgent;
use yii\helpers\Url;

$userAgent = new UserAgent();
$isMobile = $userAgent->isMobile;

if ($isMobile) {
    // 移动端渲染列表
    foreach ($dataProvider->models as $model) {
        echo '<div class="card mb-2">';
        echo '<div class="card-body">';
        echo '<h5 class="card-title">' . $model->username . '</h5>';
        echo '<p class="card-text">邮箱：' . $model->email . '</p>';
        echo '<p class="card-text">创建时间：' . Yii::$app->formatter->asDatetime($model->created_at) . '</p>';
        echo '<a href="' . Url::to(['view', 'id' => $model->id]) . '" class="btn btn-sm btn-primary">查看</a>';
        echo '</div></div>';
    }
} else {
    // 桌面端渲染原生GridView
    echo \yii\grid\GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            // 列配置...
        ],
    ]);
}

这个方案用户体验最好，因为移动端的列表布局比表格更直观，但需要额外维护一套移动端的视图代码。

内容的提问来源于stack exchange，提问作者Dev