Yii2 GridView 表格用法

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

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

表格整体配置

自定义行样式

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

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

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

禁止表头排序

需要ActiveDataProvider的设置

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

表格加表头

<?= 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

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

html渲染

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

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

标题内容样式

内容居中

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

字段内容样式

内容换行

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

字段不允许点击排序

['attribute' => 'id','enableSorting' => false,
],

是否显示指定列

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

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

链接可点击跳转

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

显示图片

["label" => "商品图片","format" => ["image", ["width"=>"200","height"=>"200"]],"value" => function ($model) { return $model->image; }
],

自定义操作按钮

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

["class" => "yii\grid\ActionColumn","template" => "{log} {view} {update}","header" => "操作","buttons" => ["log" => function ($url, $model, $key) { return Html::a("日志", $url, ["title" => "查看日志"] ); },],
],

操作按钮调用JS

["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方法

自定义字段

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

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

实现批量删除

GridView设置options时增加一个id 这里我们命名grid

<?= GridView::widget(['dataProvider' => $dataProvider,"options" => [// ...其他设置项"id" => "grid"],
]); ?>

批量删除需要用到复选框，在columns增加选项复选框，name值设定为id方便对数据操作

<?= GridView::widget(['dataProvider' => $dataProvider,"options" => ["id" => "grid"],"columns" => [// ......["class" => "yii\grid\CheckboxColumn","name" => "id",],// ......],
]); ?>

页面上增加一个批量删除按钮，这里增加了一个classbatch-del,方便后面js实现点击效果

<?= Html::a("批量删除", "javascript:;", ["class" => "btn btn-success batch-del"]) ?>

js实现按钮操作

<?php
$this->registerJs('
$(".batch-del").on("click", function () {//注意这里的$("#grid")，要跟我们第一步设定的options id一致var keys = $("#grid").yiiGridView("getSelectedRows");console.log(keys);
});
');
?>

`format`格式

视图中

处理html标签

'format' => 'raw'

处理时间

'format' => ['date', 'php:Y-m-d H:i']

处理图片

"format" => ["image", ["width"=>"200","height"=>"200"]
],

控制器中

yii\i18n\Formatter

常用的属性

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

'formatter' => ['dateFormat' => 'yyyy-MM-dd','datetimeFormat' => 'yyyy-MM-dd HH:mm:ss','decimalSeparator' => ',','thousandSeparator' => ' ','currencyCode' => 'CNY',
],

格式化

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:00echo 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

Yii2 GridView 表格用法相关推荐

jtable如何从表格中定位_Java Swing组件编程之JTable表格用法实例详解
本文实例讲述了Java Swing组件编程之JTable表格用法.分享给大家供大家参考,具体如下: 表格是GUI编程中使用较多,但也是最麻烦的一个控件之一.表格是用来显示二维数据,提供编辑,选择等功能 ...
asp.net DataGrid GridView 表格之选中行与获取选中行数据
一.GridView 表格之选中行 asp.net选中行的功能最初以为只能通过属性中AllowGenerateSelectButton(运行时是否自动生成选择按钮)来实现,需要点击生成的选择按钮来操作 ...
利用yii2 gridview实现批量删除案例
作者:白狼出处:http://www.manks.top/article/yii2_gridview_deleteall本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置 ...
DevExpress中实现给GridControl下的GridView表格修改指定行、列的背景颜色和获取选择行的信息
一.实现效果 ①修改GridView的标题背景颜色: ②修改选中行的背景颜色: ③修改指定行的背景颜色: ④修改指定列的背景颜色: ⑤修改指定单元格的背景颜色: ⑥获取GridView表格选中行的数据 ...
W3school html 表格用法总结
html 5 表格用法总结 1. 表格标签表格描述 table 定义表格 caption 定义标题 th 定义表头 td 定义单元格 2. 应用实例表格边框- "<table b ...
DevExpress中实现给GridControl下的GridView表格列设置是否可以编辑数据
DevExpress中实现给GridView表格修改指定行.列的背景颜色和获取选择行的信息https://coffeemilk.blog.csdn.net/article/details/120146 ...
关于ASP.NET编程中，GridView表格无法执行RenderControl()方法的问题
当GridView表格控件设置了"自动排序"时,其RenderControl()方法运行时会报错.
EasyExcel导入和导出excel数据表格用法示例
说明:平时项目中经常有需要把excel表格中的数据导入库中,或者需要把查询出来的数据导出到excel文件中,今天就来介绍阿里的 easyexcel 的用法一.SpringBoot集成EasyExce ...
如何设置好看的form表单样式_网页开发之表格用法，该如何制作？
表格的主要作用 1 2 3.表格的具体用法: <table> <tr> <td>单元格内的文字td> ... tr> ... table> 1.& ...

Yii2 GridView 表格用法

表格整体配置

自定义行样式

禁止表头排序

表格加表头

表格列的配置

设定宽度

html渲染

标题内容样式

字段内容样式

字段不允许点击排序

是否显示指定列

链接可点击跳转

显示图片

自定义操作按钮

操作按钮调用JS

自定义字段

实现批量删除

`format`格式

视图中

控制器中

常用的属性

格式化

Yii2 GridView 表格用法相关推荐

最新文章

热门文章

Yii2 GridView 表格用法

表格整体配置

自定义行样式

禁止表头排序

表格加表头

表格列的配置

设定宽度

html渲染

标题内容样式

字段内容样式

字段不允许点击排序

是否显示指定列

链接可点击跳转

显示图片

自定义操作按钮

操作按钮调用JS

自定义字段

实现批量删除

format格式

视图中

控制器中

常用的属性

格式化

Yii2 GridView 表格用法相关推荐

最新文章

热门文章

`format`格式