Yii2 GridView 表格用法

发表于 | 分类于 ， | | 浏览 次
字数统计: 1.4k | 阅读时长 ≈ 7

Yii2框架下展示列表数据通常用Gridview来实现，这里整理常用的小技巧，方便以后查询使用

1
2
3
4
5
6
7
8
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'layout' => "{items}\n{summary}\n{pager}",
    'tableOptions' => ['class' => 'table table-striped table-bordered table-hover'],
    'columns' => [
        
    ],
]); ?>

表格整体配置

自定义行样式

单数行为绿色背景，偶数行为红色背景

1
2
3
4
5
6
7
8
<?= GridView::widget([
    // ......
    "dataProvider" => $dataProvider,
    "rowOptions" => function($model, $key, $index, $grid) {
        return ["class" => $index % 2 == 0 ? "red" : "green"];
    },
    // ......
]); ?>

red和green需要有对应的样式实现

禁止表头排序

需要ActiveDataProvider的设置

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

表格加表头

1
2
3
4
5
6
7
8
9
10
11
<?= GridView::widget([
    // ......
    "dataProvider" => $dataProvider,
    'caption' => '订单管理',
    'captionOptions' => ['style' => 'font-size: 18px; font-weight: bold; color: #000; text-align: center;'],
    
    "rowOptions" => function($model, $key, $index, $grid) {
        return ["class" => $index % 2 == 0 ? "red" : "green"];
    },
    // ......
]); ?>

表格列的配置

列的展示放在 columns 数组中

设定宽度

设置title列的宽度为100，通过配置项headerOptions

1
2
3
4
5
[
    "attribute" => "title",
    "value" => "title",
    "headerOptions" => ["width" => "100"],
],

html渲染

输出的字符串还有html标签，例如<p>Hello World</p，我们想以p标签的形式展示Hello World，需要指定format为raw

1
2
3
4
5
6
7
[
    "attribute" => "title",
    "value" => function ($model) { 
        return Html::encode($model->title); 
    },
    "format" => "raw",
],

标题内容样式

内容居中

1
2
3
4
[
    'attribute' => 'replay_url',
    'headerOptions' => ['style' => 'text-align:center;', 'width' => '200'],
],

字段内容样式

内容换行

1
2
3
4
[
    'attribute' => 'replay_url',
    'contentOptions' => ['style' => 'white-space: normal;', 'width' => '200'],
],

字段不允许点击排序

1
2
3
4
[
    'attribute' => 'id',
    'enableSorting' => false,
],

是否显示指定列

当type的值等于1的时候，name列才显示，否则该列不显示

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

链接可点击跳转

1
2
3
4
5
6
7
[
    "attribute" => "order_id",
    "value" => function ($model) {
        return Html::a($model->order_id, "/order/detail?id={$model->order_id}", ["target" => "_blank"]);
    },
    "format" => "raw",
],

显示图片

1
2
3
4
5
6
7
8
9
10
11
12
13
[
    "label" => "商品图片",
    "format" => [
        "image", 
        [
            "width"=>"200",
            "height"=>"200"
        ]
    ],
    "value" => function ($model) { 
        return $model->image; 
    }
],

自定义操作按钮

通过设置ActionColumn类，修改配置项template，在buttons项增加template里增加的log

1
2
3
4
5
6
7
8
9
10
[
    "class" => "yii\grid\ActionColumn",
    "template" => "{log} {view} {update}",
    "header" => "操作",
    "buttons" => [
        "log" => function ($url, $model, $key) { 
            return Html::a("日志", $url, ["title" => "查看日志"] ); 
        },
    ],
],

操作按钮调用JS

1
2
3
4
5
6
7
8
9
[
    "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方法

自定义字段

在表格里增加一列且数据库中不存在对应的列

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

实现批量删除

  1. GridView设置options时增加一个id 这里我们命名grid
1
2
3
4
5
6
7
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    "options" => [
        // ...其他设置项
        "id" => "grid"
    ],
]); ?>
  1. 批量删除需要用到复选框，在columns增加选项复选框，name值设定为id方便对数据操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    "options" => [
        "id" => "grid"
    ],
    "columns" => [
        // ......
        [
            "class" => "yii\grid\CheckboxColumn",
            "name" => "id",
        ],
        // ......
    ],
]); ?>
  1. 页面上增加一个批量删除按钮，这里增加了一个classbatch-del,方便后面js实现点击效果
1
<?= Html::a("批量删除", "javascript:;", ["class" => "btn btn-success batch-del"]) ?>
  1. js实现按钮操作
1
2
3
4
5
6
7
8
9
<?php
$this->registerJs('
$(".batch-del").on("click", function () {
    //注意这里的$("#grid")，要跟我们第一步设定的options id一致
    var keys = $("#grid").yiiGridView("getSelectedRows");
    console.log(keys);
});
');
?>

format格式

视图中

  • 处理html标签
1
'format' => 'raw'
  • 处理时间
1
'format' => ['date', 'php:Y-m-d H:i']
  • 处理图片
1
2
3
4
5
6
7
"format" => [
    "image", 
    [
        "width"=>"200",
        "height"=>"200"
    ]
],

控制器中

yii\i18n\Formatter

常用的属性

  1. $dateFormat
    日期格式：yyyy-MM-dd,或者 “short”, “medium”, “long”, or “full”
  2. $datetimeFormat
    具体时间格式：yyyy-MM-dd HH:mm:ss
  3. $locale
    区域位置，如果没有设置，将使用 yii\base\Application::$language,按照这一区域的习惯显示格式
  4. $defaultTimeZone
    时区，默认UTC
  5. 要使用formatter需要在config中的配置
1
2
3
4
5
6
7
'formatter' => [
    'dateFormat' => 'yyyy-MM-dd',
    'datetimeFormat' => 'yyyy-MM-dd HH:mm:ss',
    'decimalSeparator' => ',',
    'thousandSeparator' => ' ',
    'currencyCode' => 'CNY',
],

格式化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
echo Yii::$app->formatter->asRelativeTime(1463632983).'<br/>'; // 几天前 几小时前
echo Yii::$app->formatter->asDatetime(1463606983).'<br>';  // 2015-6-16 11:51:43
echo Yii::$app->formatter->asDatetime('now').'<br>';
// 也可处理null值的输出显示:
echo Yii::$app->formatter->asDate(null).'<br>'; // 输出: (未设置)  
echo Yii::$app->formatter->asPercent(0.125, 2).'<br>'; // 输出: 12.50%
echo Yii::$app->formatter->asTimestamp('now').'<br>';//输出时间戳
echo Yii::$app->formatter->asTime(1412599260).'<br>'; // 14:41:00
echo Yii::$app->formatter->asTime('2014-10-06 12:41:00').'<br>'; // 14:41:00
echo Yii::$app->formatter->asTime('2014-10-06 14:41:00 CEST').'<br>'; // 14:41:00

echo Yii::$app->formatter->asRaw(1463606983).'<br>';//简单输出输入值
echo Yii::$app->formatter->asText('<h3>hello</h3>').'<br>';//将字符串中html标签当做字符串输出
echo Yii::$app->formatter->asHtml('<h3>hello</h3>').'<br>';//作为Html的文档输出
echo Yii::$app->formatter->asNtext("<h3>hello.\nword</h3>").'<br>';//在字符串中遇到\n可以将它作为换行符实现
echo Yii::$app->formatter->asEmail('cebe@example.com').'<br>';// 输出: <a href="mailto:cebe@example.com">cebe@example.com</a>
echo Yii::$app->formatter->asParagraphs('hello').'<br>';// 值会转换成HTML编码的文本段落，用<p>标签包裹；
echo Yii::$app->formatter->asUrl('www.baidu.com').'<br>';//值会格式化成url的连接
echo Yii::$app->formatter->asImage('my2.jpeg',['alt'=>'图片无法显示']).'<br>';//图片的链接会转化成<img src='my.jpg'/>
echo Yii::$app->formatter->asBoolean(true).'<br>';//输出yes
坚持原创技术分享，您的支持将鼓励我继续创作！
0%