Yii2 GridView 表格用法

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"];
},
// ......
]); ?>

redgreen需要有对应的样式实现

禁止表头排序

需要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,需要指定formatraw

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%