Yii2的相关学习记录,Gridview小部件使用及kartik-v/yii2-grid扩展(五)

现在记录下Gridview的相关内容,也是强迫症犯了,Yii2自带的Gridview虽然不错,但是过滤栏如果一些字段用不着,不会自动合并成一行,当然也可以过滤栏不用,而是在最上方自己写一些需要检索的数据,但是这样很麻烦,还要自己去规划样式,写检索什么的。正好在搜索将检索栏和标题合并时,看到了kartik-v/yii2-grid可以实现这些功能,而且还自带导出excel、csv等数据,所以也顺便试了下它的功能,调出了自己喜欢的样式。在用kartik-v的Gridview之前我们还是要了解Yii2自带的Gridview的功能的,大体常用的一些方法如下:

1、Yii默认有四种样式的列,分别为Data column(默认)、Action column(操作)、Checkbox column(可选中)、Serial column(带序列号)

2、标题名字会根据Model中的attributeLabels()方法,来自动替换成对应的中文。当然也可以通过‘label’来自己定义,而‘attribute’则是指定根据哪个字段排序。其它的像是‘visible‘来隐藏显示,‘header‘显示头部内容,‘headerOptions‘来定义css或style样式等等。

[
    ‘label‘=>‘你想要的名称‘,
    ‘attribute‘=>‘id‘,//可以排序的字段
]

3、自定义显示页数和排序字段,如果用到了searchModel,则需要在searchModel的search方法中定义,否则,需要在Controller中定义:

$dataProvider = new ActiveDataProvider([
    ‘query‘ => $query,
    ‘pagination‘ => [
        ‘pageSize‘ => 15,//如果不定义,默认为20
    ],
    ‘sort‘ => [‘attributes‘ => [‘id‘]],//如果定义,则只能按照id来排序,否则所有字段都可以
]);

4、下拉菜单检索,好比根据下拉菜单检索用户状态,则需要先在model中定义相关的方法,然后在Gridview中再做处理:

//Model中,定义一个静态方法
const STATUS_DELETED = 0;
const STATUS_ACTIVE = 10;
public static function getZhStatus($status=false){
    $status_array= [
        ‘‘=>‘请选择‘,
        self::STATUS_DELETED=>‘禁止‘,
        self::STATUS_ACTIVE=>‘正常‘
    ];
    return $status==false?$status_array:ArrayHelper::getValue($status_array,$status,‘未知‘);
}
//Gridview中
[
    ‘attribute‘ => ‘status‘,
    ‘filter‘=>Html::activeDropDownList($searchModel,‘status‘,User::getZhStatus(),[‘class‘ => ‘form-control ‘]),
    ‘value‘=>function($data){
        return User::getZhStatus($data->status);
    },
],   

5、格式化时间,有好几种方法:

方法一:类似上面的定义回调函数

[
    ‘attribute‘=>‘created_at‘,
    ‘value‘=>function($data){
        return date(‘Y-m-d‘,$data->created_at);
   },
]

方法二:用Gridview自带的format配置

[
    ‘attribute‘=>‘created_at‘,
    ‘format‘=>[‘date‘,‘php:Y-m-d‘],
    ‘value‘=>‘created_at‘,
],

方法三:首先在config中配置好你的时间格式,否则会是英文格式的,然后再在Gridview中处理。

//在common/config/main.php中定义自己的时间、金钱等的格式
‘components‘ => [
    ‘formatter‘ => [
        ‘dateFormat‘ => ‘yyyy-MM-dd‘,
        ‘datetimeFormat‘ => ‘yyyy-MM-dd HH:mm:ss‘,
        ‘decimalSeparator‘ => ‘,‘,
        ‘thousandSeparator‘ => ‘ ‘,
        ‘currencyCode‘ => ‘CNY‘,
    ],
],

这里用到了快速写的一种方式:“attribute:format:label”(属性:格式:标签)这种格式,详情点击这里的api文档。所以我们这样就可以了:(如果定义了上方,则方法二可以直接‘format‘=>‘date‘即可以正确显示)

‘created_at:date‘,

6、显示超链接或图片,都是用的回调函数的方法,这里以超链接为例,注意format需要为‘raw’,不对结果做任何格式化处理,具体的格式化方面可以点这里看看。

[
    ‘attribute‘=>‘id‘,
    ‘value‘=>function($model, $key, $index, $column){
        return Html::a($model->id,[‘user/view‘,‘id‘=>$model->id],[‘class‘ => ‘profile-link‘,‘target‘=>‘_blank‘]);
    },
    ‘format‘ => ‘raw‘,
],

7、关联表单显示,这个地方直接看指南吧,点这里看,总之就是如果管理表单设置好后,直接用类似order.name这种就可以直接显示使用,如果想要检索排序,则需要在searchModel的rulers规则方法和attributes属性方法中将此字段写入,在search方法中添加andFilterWhere的检索,以及用$query->joinWith关联字段,$dataProvider->sort->attributes[]添加排序等。

8、自定义Action Column按钮,

[
    ‘class‘ => ‘yii\grid\ActionColumn‘,
    ‘header‘=>‘操作‘,
    ‘headerOptions‘=>[‘width‘=>‘120‘],
    ‘template‘ => ‘{view} {update} {delete} {forbid} ‘,
    ‘buttons‘=>[
        ‘forbid‘=>function($url,$model){
            return Html::a(‘<i class="glyphicon glyphicon-remove-circle"></i>‘,[‘user/forbid‘,‘id‘=>$model->id]);
        }
    ],
]

以上是Yii2自带的Gridview的用法。再说下kartik-v/yii2-grid,官方文档及demo讲的比较全了,它比原生的多了几个列的形式,例如Editable Column(可编辑)、Radio Column(单选框)等,还多了一些其它功能,例如滚动时可以固定标题栏方便查看、可以总计、导出svn,excel等格式。这里稍微说下:

一开始安装完成后可能会报错pdf错误,因为这些关联的还没有安装,可以按照提示安装也可以先配置‘export‘=>false来取消导出功能,下面导出时会详细配置。

1、整体结构如下图:

2、上图中各个部分非常灵活的显示或隐藏,例如我不想要header,但是还想显示共多少页这个summary,可以将其放在before中,可以如下设置:

‘panel‘ => [
    ‘heading‘=>false,//不要了
    ‘before‘=>‘<div style="margin-top:8px">{summary}</div>‘,//放在before中,前面的div主要是想让它好看
],

当然上面的需求我们也可以直接用panelHeadingTemplate和panelBeforeTemplate来重新组装,具体可以查看Layout Templates小章节

3、一些有用的小设置

‘responsive‘=>true,//自适应,默认为true
‘hover‘=>true,//鼠标移动上去时,颜色变色,默认为false
‘floatHeader‘=>true,//向下滚动时,标题栏可以fixed,默认为false
‘showPageSummary‘=>true,//显示统计栏,默认为false
//column中的一些设置
‘columns‘ => [
    [
        ‘class‘ => ‘\kartik\grid\CheckboxColumn‘,
        ‘rowSelectedClass‘ => GridView::TYPE_INFO,
        ‘visible‘=>true,//不显示,代码也没有
        ‘hidden‘=>true,//隐藏,代码还有,导出csv等时还存在
        ‘hiddenFromExport‘=>true,//虽然显示,但导出csv时忽略掉
        ‘pageSummary‘=>‘总计‘,//可以是字符串,当为true时,自动合计
        ‘mergeHeader‘=>true,//合并标题和检索栏
    ],
]

4、{toggleData}设置,主要是用来显示分页还是全部数据显示

‘toggleDataOptions‘=>[
    ‘maxCount‘ => 200,//当超过200条时,此按钮隐藏,以免数据太多造成加载问题
    // ‘minCount‘ => 10,//当超过10条,点击时才会下面的提示
    ‘confirmMsg‘ => ‘总共‘. number_format($dataProvider->getTotalCount()).‘条数据,确定要显示全部?‘,//点击时的确认
],

5、{export}设置,可导出excel,csv,pdf等各种类型的文件,下面为导出csv的格式,如果在exportConfig只配置了csv,则只显示导出csv,如果还想导出excel等格式,需要在exportConfig中添加。我在这里导出csv时,不管设置编码是gbk还是utf,用excel2013打开时都是中文乱码,而用sublime等编辑器打开则正常,(导出excel格式则正常),有知道此问题的朋友,麻烦留言指教。

‘export‘=>[
    ‘fontAwesome‘=>‘fa fa-share-square-o‘,//图标
    ‘target‘=>‘_blank‘,//在新标签打开
    ‘encoding‘=>‘gbk‘,//编码
],
‘exportConfig‘ => [
    GridView::CSV => [
        ‘label‘ => ‘导出CSV‘,
        ‘iconOptions‘ => [‘class‘ => ‘text-primary‘],
        ‘showHeader‘ => true,
        ‘showPageSummary‘ => true,
        ‘showFooter‘ => true,
        ‘showCaption‘ => true,
        ‘filename‘ => ‘用户表‘.date("Y-m-d"),
        ‘alertMsg‘ => ‘确定要导出CSV格式文件?‘,
        ‘options‘ => [
            ‘title‘=>‘‘,
        ],
        ‘mime‘ => ‘application/csv‘,
        ‘config‘ => [
            ‘colDelimiter‘ => ",",
            ‘rowDelimiter‘ => "\r\n",
        ],
    ],
],       

基本也就这么多,附上我自己还比较满意设置的样式截图:(kartik-v/yii2-grid的样式依赖于bootstrap,与adminlte的表格样式相冲突,尤其是在合并标题栏和检索栏时,合并的下方边框会变粗,试了好多设置让其全部都加粗都不行,最后只能妥协,修改kartik-v/yii2-grid的kv-merged-header的默认样式,加了这一段:$this->registerCss(".kv-merged-header{border-bottom:1px solid #eee !important}");,勉强看得过去。)

本来还想继续写下美化alert,confirm等弹出框及自动关闭什么的扩展以及批量删除等的代码来着,但是kartik-v/yii2-dialog这个就是安装时不停出错。再找找有什么替代的到时候再补充吧。写这个途中火狐崩溃两次,重写了好大段内容,哭死!

时间: 2024-08-06 03:44:41

Yii2的相关学习记录,Gridview小部件使用及kartik-v/yii2-grid扩展(五)的相关文章

Yii2的相关学习记录,alert等美化、confirm异步、session中的flash及小部件的使用(六)

呃,系统自带的alert.confirm等弹出框实在是难看,作为一个颜控,这能忍? 这里我用的是kartik-v/yii2-dialog,这个是基于bootstrap3-dialog这个来做了一些常用alert.confirm和dialog的小部件封装,当然了,本质上还是bootstrap3-dialog,可以用原生的方法,原生方法的用法点这里,而bootstrap3-dialog又是基于bootstrap3的modals做的封装.嗯,基本关系就是这样.在搜索这个相关知识时,经常会看到有人提到b

Yii2的相关学习记录,后台模板和gii(三)

前面已经可以正常登录,但我们需要体验下最常用的增删查改的操作.这里就需要gii,通过gii可以方便的生成表单.表格的框架,不需要我们再写重复的东西. gii访问地址:http://localhost/vishun/frontend/web/index.php?r=gii或者http://localhost/vishun/backend/web/index.php?r=gii,由于前后台文件都有配置,所以都可以访问.由于Yii框架高级版已经在common/models中存在user模型了,所以,我

Yii2的相关学习记录,安装Yii2(一)

原先学习过Yii1的相关知识,但是也是半懂不懂的,但稍微的结构是了解的.现在利用晚上的时间学习下Yii2的使用,这里记录下,以免自己以后忘记. 目前已看一部分Yii2的权威指南,虽然Yiiframework中文网站的权威,跟英文版本比较有些章节缺失内容,但也能大体了解,用的某功能时再仔细看.顺便看了慕课网上的“与Yii框架不得不说的故事”,讲的也不错的. 还有比较重要的是需要FQ用google,毕竟是国外的框架,中文的内容比较少,大部分解答都能在谷歌中搜索到,这里可以用XX-Net,具体的如何用

Yii2的相关学习记录,前后台分离及migrate使用(七)

最近一直忙其它的(其实是懒!),将<深入理解Yii2>看了一遍,一些当初没明白的稍微明了了点,然后又看yii2的图片上传等处理.富文本.restful什么的,但由于没进行到这里,只看也不管用啊,所以还是按照步骤一步步来,先说说前后台分离.(其实普通的内容管理站点用不着下面所说的彻底分离什么的,看看也无妨) 个人感觉前后台的情况有这么几种,首先是前后台是否是用一个验证体系,其次是前后台是否共用一个数据表.一般来说下面三种比较常用吧: A.共用一个验证体系和一个数据表. B.两个验证体系和共用一个

yii2之GridView小部件

GridView小部件用于展示多条数据的列表.GridView小部件的使用需要数据提供器即yii\data\ActiveDataProvider的实例作为参数,所以 第一步就是要在控制器方法中创建这个实例然后传给视图,下面以我做的一个demo为例子进行讲解. 控制器LifeController代码: //生活记录列表 public function actionIndex() { $searchModel = new Life(['scenario' => Life::SCENARIO_SEAR

webpack学习记录(九)-小插件应用

webpack学习记录(九)-小插件应用 clean-webpack-plugin 每次输出之前先删除之前的目录,即每次输出都是最新的打包文件 安装及配置 npm i clean-webpack-plugin -D // 注意该插件引入方式需要用解构赋值才有效 const {CleanWebpackPlugin} = require('clean-webpack-plugin') module.exports = { plugins: [ new CleanWebpackPlugin() ] }

tiny210(S5PV210)LCD控制器RGB配置相关学习记录

最近在弄210LCD的配置,在这里记录下一些学习的东西,有错恳请指正,互相学习. datasheet里面有好多名词,先记录一下一些名词的大概意思: alpha blending:本来采用R.G.B三通道来表示颜色,但是显示控制器分为5个图层,故图层混合时需要按照一定的比例因子来混合以实现图层的透明度,而不至于将背景图层完全覆盖掉,现在增加alpha通道来作为那个颜色混合时的调节因子,配置相关的设置后,透过调节alpha值则可以实现图层间透明度的控制,而所谓的透明度,相当于是两图层的按照不同的合成

转义的相关学习记录

学习编程语言的时候,经常碰到需要对字符转义的情况,有时候自己会把一些知识点搞混,特以此文记录,持续更新. 先看一个小例子,要写一个正则匹配像'010-12345'这样的电话号码,由于'-'是特殊字符,在正则表达式中,要用'\'转义,所以,上面的正则是\d{3}\-\d{3,8}.如果不用'\'转义,则'-'就成正则里范围的意思. 以上这个小例子讲了为什么要转义. 另外,js里的字符串也有一些需要转义的字符字面量,详见高程33页.平时用的比较多的是对'\\' ,'\'' ,'\'''以及'\unn

使用hibernate更新数据库记录的信息的相关学习记录

截选代码(可能遗漏标点符号): package name.sql; import java.util.List; import name.session.HibernateSessionFactory; import org.hibernate.Query;import org.hibernate.Session;import org.hibernate.Transaction; public class SqlHelper { //增 public void save(Object obj){