yii2 GridView常见操作

收集了网络上GridView出现的大部分问题做一个总结，希望有一个能帮助到你。

如果下面有没说到的GridView常见问题，下方留言，我会进行补充。

下拉搜索
日期格式化并实现日期可搜索
根据参数进行是否显示
链接可点击跳转
显示图片
html渲染
自定义按钮
设定宽度等样式
自定义字段
自定义行样式
增加按钮调用js操作
实现批量删除案例
批量删除
禁止排序
table加表头
字段内容换行

yii2 GridView 下拉搜索实现案例教程

yii2 GridView 日期格式化并实现日期可搜索案例

是否显示某列案例

我们举一个简单的案例

条件：有一个get形参数type

需求：仅且type的值等于1的时候，列name才显示，否则该列不显示

代码实现如下：

[
    "attribute" => "name",
    "value" => $model->name,
    "visible" => intval(Yii::$app->request->get("type")) == 1,
],

实现方式也是很简单滴。

链接可点击跳转案例

这个跟接下来我们要说的html渲染的效果十分类似，这里要说的是列的属性值 format,具体都有哪些格式可查看文件 yii\i18n\Formatter.php，各种format都可以解决

[
    "attribute" => "order_id",
    "value" => function ($model) {
        return Html::a($model->order_id, "/order?id={$model->order_id}", ["target" => "_blank"]);
    },
    "format" => "raw",
],

显示图片案例

同上，这里只需要指定format格式为image即可，format第二个参数可设定图片大小，可参考下面的代码

[
    "label" => "头像",
    "format" => [
        "image", 
        [
            "width"=>"84",
            "height"=>"84"
        ]
    ],
    "value" => function ($model) { 
        return $model->image; 
    }
],

html渲染案例

什么意思喃，举个例子，我们有一个字段，标记为title，但是这个title不一样，ta含有html标签，我们不想在页面上展示<p>title123<p>这种形式，我们想要title123以p标签的形式展示，代码可参考如下，只需要指定format为raw形式即可

[
    "attribute" => "title",
    "value" => function ($model) { 
        return Html::encode($model->title); 
    },
    "format" => "raw",
],

自定义按钮案例

往往列表页我们不想要删除按钮，想在增加一个比如获取xxx按钮，怎么搞呢？这里需要设置ActionColumn类，修改配置项template并在buttons项增加template里增加的get-xxx即可

[
    "class" => "yii\grid\ActionColumn",
    "template" => "{get-xxx} {view} {update}",
    "header" => "操作",
    "buttons" => [
        "get-xxx" => function ($url, $model, $key) { 
            return Html::a("获取xxx", $url, ["title" => "获取xxx"] ); 
        },
    ],
],

设定宽度案例

举个简单的例子，我们的title列，太长了，能不能给我先定下这一列的宽度？

答案：能。

请看示例：

[
    "attribute" => "title",
    "value" => "title",
    "headerOptions" => ["width" => "100"],
],

只需要指定配置项headerOptions即可。

自定义字段案例

啥时自定义？这里我们是指在表格里增加一列且数据库中不存在对应的列。假如我们新增一列订单消费金额money且该表不存在该字段

[
    "attribute" => "消费金额",
    "value" => function ($model) {
        // 这里可以根据该表的其他字段进行关联获取
    }
],

自定义行样式

有小伙伴说了，gii生成的这个gridview表格呀，行跟行的颜色不明显，看着难受，我滴乖乖，具体怎么难受咱们就不追究了。我们来看看怎么定义行样式

<?= GridView::widget([
    // ......
    "dataProvider" => $dataProvider,
    "rowOptions" => function($model, $key, $index, $grid) {
        return ["class" => $index % 2 ==0 ? "label-red" : "label-green"];
    },
    // ......
]); ?>

前面的操作我们都是依据列column的，这里因为是对行的控制，所以我们配置rowOptions要稍微注意一下。此外，自定义的label-red和label-green需要有对应的样式实现，这里我们看一下页面的实际效果

增加按钮调用js操作案例

那边产品经理走过来了，小王呀，你这个修改状态的功能很频繁，每次都要先点进详情页才能修改，能不能我在列表页面上鼠标那么一点就成功修改了呢？

其实就是一个异步请求操作了当前行的状态嘛，我们来看看gridview里面是怎么实现的。

[
    "class" => "yii\grid\ActionColumn",
    "header" => "操作",
    "template" => "{view} {update} {update-status}",
    "buttons" => [
        "update-status" => function ($url, $model, $key) {
            return Html::a("更新状态", "javascript:;", ["onclick"=>"update_status(this, ".$model->id.");"]); },
    ],
],

还没完，我们还需要在页面写js实现方法 update_status, 关于如何在页面底部加载js请点击参考

如何利用yii2 gridview实现批量删除案例

关于禁止表头的排序，这个需要ActiveDataProvider的设置

$dataProvider = new ActiveDataProvider([ "query" => $query, ]); 
$dataProvider->setSort(false);

表格加表头

我们先看看图，什么是加表头

下面贴出代码，也是很简单的设置即可，关于样式可自定义

echo GridView::widget([
    //......
    'caption' => '内容管理',
    'captionOptions' => ['style' => 'font-size: 16px; font-weight: bold; color: #000; text-align: center;'],
    'columns' => [
        //......
    ],
]);

字段内容换行

有时候gridview中的某个地段是url或者简介之类的信息，但是全部显示为一行了，这就看着很不舒服，只需要向下面这样简单设置下内容的样式即可

[
    'attribute' => 'api_url',
    'contentOptions' => ['style' => 'white-space: normal;', 'width' => '20%'],
],