小编教你：kartik-v／yii2-grid小部件扩展如何使用

　　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(‘‘,[‘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‘=>‘{summary}‘,//放在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

　　], ],

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

更多相关文章

随机推荐