yii2-GridView在开发中常用的功能及技巧
yii2 2017-02-23 22:19:15

关联查询： 

checkbox 全选 

 

GridView 小部件在开发中常用的功能及技巧。持续更新中....

数据网格或者说 GridView 小部件是Yii中最强大的部件之一。它有一个属性名叫 dataProvider ，这个属性能够提供一个数据提供者的示例并且可以显示所提供的数据，即使用 yii\grid\GridView::columns 属性的一组列配置，在一个表格中渲染每一行数据。

例如，

PHP Code复制内容到剪贴板
  1. use yii\grid\GridView;  
  2. echo yii\grid\GridView::widget([  
  3.     'dataProvider' => $dataProvider,  
  4. ]);  

 

GridView去掉排序，去掉搜索 

PHP Code复制内容到剪贴板
  1. public function actionIndex()  
  2. {  
  3.     $searchModel = new SupplierManageSearch();  
  4.     $dataProvider = $searchModel->search(Yii::$app->request->queryParams);  
  5.     $dataProvider->setSort(false); //去掉排序  
  6.   
  7.     return $this->render('index', [  
  8.         'searchModel' => $searchModel,  
  9.         'dataProvider' => $dataProvider,  
  10.     ]);  
  11. }  

 

PHP Code复制内容到剪贴板
  1.             <?= GridView::widget([  
  2.                 'dataProvider' => $dataProvider,  
  3. //去掉搜索       'filterModel' => $searchModel,  
  4.                 'columns' => [  
  5. //                    'id',  
  6.                     'cod',  
  7.                     'nme',  
  8.                     ['class' => 'yii\grid\ActionColumn'],  
  9.                 ],  
  10.             ]); ?>  

 

 

 

 

一、表格列

表格的列是通过 GridView 配置项中的 yii\grid\GridView::columns 属性配置的.

PHP Code复制内容到剪贴板
  1. <?php  
  2. use yii\grid\GridView;  
  3. echo GridView::widget([  
  4.     'dataProvider' => $dataProvider,  
  5.       
  6.     //表格列值搜索功能，注意一定要配合attribute才会显示  
  7.     //$searchModel = new ArticleSearch();  
  8.     'filterModel' => $searchModel,  
  9.       
  10.     //重新定义分页样式  
  11.     'layout'=> '{items}<div class="text-right tooltip-demo">{pager}</div>',  
  12.     'pager'=>[  
  13.         //'options'=>['class'=>'hidden']//关闭分页  
  14.         'firstPageLabel'=>"First",  
  15.         'prevPageLabel'=>'Prev',  
  16.         'nextPageLabel'=>'Next',  
  17.         'lastPageLabel'=>'Last',  
  18.      ]  
  19.           
  20.     'columns' => [  
  21.         ['class' => 'yii\grid\SerialColumn'],//序列号从1自增长  
  22.           
  23.         // 数据提供者中所含数据所定义的简单的列  
  24.         // 使用的是模型的列的数据  
  25.         'id',  
  26.         'username',  
  27.           
  28.         // 更复杂的列数据  
  29.         [  
  30.             'class' => 'yii\grid\DataColumn', //由于是默认类型，可以省略   
  31.             'value' => function ($data) {  
  32.                 return $data->name;   
  33.                 // 如果是数组数据则为 $data['name'] ，  
  34.                 例如，使用 SqlDataProvider 的情形。  
  35.             },  
  36.         ],  
  37.           
  38.         ['label'=>'标题','value' => 'title'],  
  39.           
  40.         ['label'=>'文章内容','format' => 'html','value' => 'content'],  
  41.                           
  42.         [  
  43.             'label'=>'文章类别',    
  44.             /*'attribute' => 'cid',产生一个a标签,点击可排序*/    
  45.             'value' => 'cate.cname' //关联表  
  46.         ],  
  47.           
  48.         [  
  49.            //动作列yii\grid\ActionColumn   
  50.            //用于显示一些动作按钮，如每一行的更新、删除操作。  
  51.           'class' => 'yii\grid\ActionColumn',  
  52.           'header' => '操作',   
  53.           'template' => '{delete} {update}',//只需要展示删除和更新  
  54.           'headerOptions' => ['width' => '240'],  
  55.           'buttons' => [  
  56.             'delete' => function($url, $model, $key){  
  57.                return Html::a('<i class="fa fa-ban"></i> 删除',  
  58.                     ['del', 'id' => $key],   
  59.                     [  
  60.                      'class' => 'btn btn-default btn-xs',  
  61.                      'data' => ['confirm' => '你确定要删除文章吗？',]  
  62.                     ]  
  63.                );  
  64.              },                       
  65.            ],  
  66.          ],  
  67.           
  68.     ],  
  69. ]);  
  70. ?>  

1. 处理时间

数据列的主要配置项是 yii\grid\DataColumn::format 属性。它的值默认是使用 \yii\i18n\Formatter 应用组件。

PHP Code复制内容到剪贴板
  1. [  
  2.  'label'=>'更新日期',  
  3.  'format' => ['date', 'php:Y-m-d'],  
  4.  'value' => 'updated_at'  
  5. ],  
  6.   
  7. //or  
  8. [  
  9.  //'attribute' => 'created_at',  
  10.  'label'=>'更新时间',  
  11.   'value'=>function($model){  
  12.         return  date('Y-m-d H:i:s',$model->created_at);     
  13.   },  
  14.  'headerOptions' => ['width' => '170'],  
  15. ],  

 

PHP Code复制内容到剪贴板
  1. 'start_time:datetime',  

 

PHP Code复制内容到剪贴板
  1. [  
  2.         'label'=>'创建日期',  
  3.         'attribute' => 'created_at',  
  4.         'filter' => false, //不显示搜索框  
  5.         'value' => function($data) {  
  6.                return date('Y-m-d H:i:s',$data->created_at); }  
  7. ],  

 

PHP Code复制内容到剪贴板
  1. [  
  2.         'label'=>'创建日期',  
  3.         'attribute' => 'created_at',  
  4.         'format' => ['date', 'php:Y-m-d H:i:s'],  
  5. ],  

 

2. 处理图片

PHP Code复制内容到剪贴板
  1. [  
  2.     'label'=>'封面图',  
  3.     'format'=>'raw',  
  4.     'value'=>function($m){  
  5.         return Html::img($m->cover,  
  6.                     ['class' => 'img-circle',  
  7.                     'width' => 30]  
  8.         );  
  9.     }  
  10. ],  

3. 数据列有链接

PHP Code复制内容到剪贴板
  1. [  
  2.    'attribute' => 'title',  
  3.    'value' => function ($model, $key, $index, $column) {  
  4.             return Html::a($model->title,   
  5.                 ['article/view', 'id' => $key]);  
  6.     },  
  7.    'format' => 'raw',  
  8. ],  
PHP Code复制内容到剪贴板
  1. [   
  2.       'attribute'=>'title’, 
  3.       'format'=>'raw’,  
  4.       'value'=> function($data){return Html::a($data->title,['exam/index',   
  5.             'id' => $data->_id],['title' => '审核']);}   
  6. ],  
  7.   
  8. [  
  9.      'label'=>'更多操作’,  
  10.      'format'=>'raw’,  
  11.      'value' => function($data) {   
  12.            $url = "http://www.baidu.com”;   
  13.            return Html::a('添加权限组', $url, ['title' => '审核']); }   
  14. ],  

4. 数据列显示枚举值(男/女）

PHP Code复制内容到剪贴板
  1. [  
  2.    'attribute' => 'sex',    
  3.    'value'=>function ($model,$key,$index,$column){  
  4.           return $model->sex==1?'男':'女';     
  5.     }，  
  6.       
  7.     //在搜索条件（过滤条件）中使用下拉框来搜索  
  8.     'filter' => ['1'=>'男','0'=>'女'],  
  9.     //or  
  10.     'filter' => Html::activeDropDownList($searchModel,  
  11.                 'sex',['1'=>'男','0'=>'女'],  
  12.                 ['prompt'=>'全部']  
  13.      )  
  14. ],  
  15. [  
  16.     'label'=>'产品状态',    
  17.     'attribute' => 'pro_name',    
  18.     'value' => function ($model) {  
  19.         $state = [  
  20.             '0' => '未发货',  
  21.             '1' => '已发货',  
  22.             '9' => '退货，已处理',  
  23.         ];  
  24.      return $state[$model->pro_name];  
  25.     },  
  26.     'headerOptions' => ['width' => '120']   
  27. ]  

 WX20181207-081115@2x.png

PHP Code复制内容到剪贴板
  1. [  
  2.     'attribute' => 'type',  
  3.     'label' => '进/出场',  
  4.     'value' => function ($model) {  
  5.         if ($model->type == 1) {  
  6.             $txt = "进场";  
  7.             if ($model->FlagPark) {  
  8.                 $txt .= " - <span class='text-danger'>已出场</span>";  
  9.             }  
  10.             return $txt;  
  11.         } else if ($model->type == 2) {  
  12.             return "出场";  
  13.         } else {  
  14.             return "";  
  15.         }  
  16.     },  
  17.     'filter' => Html::activeDropDownList($searchModel, 'type', ['1' => '进场', '0' => '出场'], ['prompt' => '全部', 'class' => 'form-control']),  
  18.     'format' => 'raw',  
  19. ],  

 

 

 

5、下拉菜单搜索

PHP Code复制内容到剪贴板
  1. [  
  2.             'label' => '当前状态',  
  3.             'attribute' => 'status',  
  4.             'filter' => Html::dropDownList('AppBaseSearch[status 
  5. ]',$searchModel-> status,  
  6.                     [ '' => '请选择',  
  7.                     ‘0' => '审核拒绝',  
  8.                     ‘1' => '审核通过',   
  9.         ]),  
  10.   
  11.      'value' => function($date) {  
  12.                     switch ($date-> status) {  
  13.                         case 1'; 
  14.                             return '审核通过'; 
  15.                             break; 
  16.                         case ‘0';  
  17.                             return '审核拒绝';  
  18.                             break;  
  19.                         default:  
  20.                             return '未知状态';  
  21.                             break;  
  22.                     }  
  23.                 }  
  24.             ],  

 

1.jpg

2.jpg

PHP Code复制内容到剪贴板
  1. use yii\grid\GridView;  
  2. use yii\helpers\Html;  
  3.   
  4. GridView::widget([  
  5.     'dataProvider' => $dataProvider,  
  6.     'filterModel' => $searchModel,  
  7.     'columns' => [  
  8.         'tag_id',  
  9.         'tag_name',  
  10.         [  
  11.             'attribute' => 'tag_style',  
  12.             //'filter' => $model->tagStyle(), //下拉选择  
  13.             'filter' => Html::activeDropDownList($searchModel,  
  14.                 'tag_style', $model->tagStyle(),  
  15.                 ['class' => 'form-control',]   //'prompt'=>'全部'  
  16.             )  
  17.         ],  
  18.     ]  
  19. ]);  

 

1.jpg

2.jpg

PHP Code复制内容到剪贴板
  1. use yii\grid\GridView;  
  2. use yii\helpers\Html;  
  3.   
  4. GridView::widget([  
  5.     'dataProvider' => $dataProvider,  
  6.     'filterModel' => $searchModel,  
  7.     'columns' => [  
  8.         'tag_id',  
  9.         'tag_name',  
  10.         [  
  11.             'attribute' => 'tag_style',  
  12.             //'filter' => $model->tagStyle(), //下拉选择  
  13.             'filter' => Html::activeDropDownList($searchModel,  
  14.                 'tag_style', $model->tagStyle(),  
  15.                 ['class' => 'form-control','prompt'=>'全部']  
  16.             )  
  17.         ],  
  18.     ]  
  19. ]);  

 

 

1、是否显示某列

我们举一个简单的案例

条件：有一个get形参数type

需求：仅且type的值等于1的时候，列name才显示，否则该列不显示。

PHP Code复制内容到剪贴板
  1. [  
  2.     'attribute' => 'name',  
  3.     'value' => $model->name,  
  4.     'visible' => intval(Yii::$app->request->get('type')) == 1,  
  5. ],  

2、链接可点击跳转案例

这个跟接下来我们要说的html渲染的效果十分类似，这里要说的是列的属性值 format,具体都有哪些格式可查看文件 yii\i18n\Formatter.php，各种format都可以解决

PHP Code复制内容到剪贴板
  1. [  
  2.     'attribute' => 'order_id',  
  3.     'value' => function ($model) {  
  4.         return Html::a($model->order_id, "/order?id={$model->order_id}", ['target' => '_blank']);  
  5.     },  
  6.     'format' => 'raw',  
  7. ],  

 

3、显示图片案例

同上，这里只需要指定format格式为image即可，format第二个参数可设定图片大小，可参考下面的代码

PHP Code复制内容到剪贴板
  1. [  
  2.     'label' => '头像',  
  3.     'format' => [  
  4.         'image',  
  5.         [  
  6.             'width'=>'84',  
  7.             'height'=>'84'  
  8.         ]  
  9.     ],  
  10.     'value' => function ($model) {  
  11.         return $model->image;  
  12.     }  
  13. ],  

 

4、html渲染案例

 title含有html标签，我们不想在页面上展示<p>title123<p>这种形式，我们想要title123以p标签的形式展示，代码可参考如下，只需要指定format为raw形式即可：

PHP Code复制内容到剪贴板
  1. [  
  2. 'attribute' => 'title',  
  3. 'value' => function ($model) {   
  4. return Html::encode($model->title);   
  5. },  
  6. 'format' => 'raw',  
  7. ],  

 

5、自定义按钮案例

往往列表页我们不想要删除按钮，想在增加一个比如获取xxx按钮，怎么搞呢？这里需要设置ActionColumn类，修改配置项template并在buttons项增加template里增加的get-xxx即可

PHP Code复制内容到剪贴板
  1. [  
  2.     'class' => 'yii\grid\ActionColumn',  
  3.     'template' => '{get-xxx} {view} {update}',  
  4.     'header' => '操作',  
  5.     'buttons' => [  
  6.         'get-xxx' => function ($url, $model, $key) {  
  7.             return Html::a('获取xxx', $url, ['title' => '获取xxx'] );  
  8.         },  
  9.     ],  
  10. ],  

 

6、设定宽度案例

举个简单的例子，我们的title列，太宽了，定下这一列的宽度

PHP Code复制内容到剪贴板
  1. [  
  2.     'attribute' => 'title',  
  3.     'value' => 'title',  
  4.     'headerOptions' => ['width' => '100'],  
  5. ],  

只需要指定配置项headerOptions即可。

 

7、自定义字段案例

啥时自定义？这里我们是指在表格里增加一列且数据库中不存在对应的列。假如我们新增一列 订单消费金额money且该表不存在该字段

PHP Code复制内容到剪贴板
  1. [  
  2.     'attribute' => '消费金额',  
  3.     'value' => function ($model) {  
  4.         // 这里可以根据该表的其他字段进行关联获取  
  5.     }  
  6. ],  

 

8、自定义行样式

gii生成的这个gridview表格，行跟行的颜色不明显，我们来看看怎么定义行样式

PHP Code复制内容到剪贴板
  1. <?= GridView::widget([  
  2. // ......  
  3.     'dataProvider' => $dataProvider,  
  4.     'rowOptions' => function($model, $key, $index, $grid) {  
  5.         return ['class' => $index % 2 ==0 ? 'label-red' : 'label-green'];  
  6.     },  
  7. // ......  
  8. ]); ?>  

前面的操作我们都是依据列column的，这里因为是对行的控制，所以我们配置rowOptions要稍微注意一下。此外，自定义的label-red和label-green需要有对应的样式实现，这里我们看一下页面的实际效果

 

9、增加按钮调用js操作案例

如果修改状态的功能很频繁，每次都要先点进详情页才能修改，加载一个异步请求操作了当前行的状态，我们来看看gridview里面是怎么实现的。

PHP Code复制内容到剪贴板
  1. [  
  2.     'class' => 'yii\grid\ActionColumn',  
  3.     'header' => '操作',  
  4.     'template' => '{view} {update} {update-status}',  
  5.     'buttons' => [  
  6.         'update-status' => function ($url, $model, $key) {  
  7.             return Html::a('更新状态', 'javascript:;', ['onclick'=>'update_status(this, '.$model->id.');']); },  
  8.     ],  
  9. ],  

我们需要在页面写js实现方法 update_status

 

两种方式： 

一、

1、model，对当前model的category_id关联分类表的id：

PHP Code复制内容到剪贴板
  1. public function getCategory()  
  2. {  
  3.     return $this->hasOne(lifeCategory::className(), ['id' => 'category_id']);  
  4. }  

2、searchModel关联一下定义好的get方法：

 QQ图片20170503140803.png

3、view中调用：

PHP Code复制内容到剪贴板
  1. 'category.name',  //category.字段名  

二、

1、定义hasone方法，

2、view中调用：

PHP Code复制内容到剪贴板
  1. [  
  2.     'attribute' => 'category_id',  
  3.     'enableSorting' => true,  
  4.     'value' => function ($model) {  
  5.         return $model->category->name;  
  6.     },  
  7. ],  

 

checkbox：

更改checkbox的全选框加文字参数为head

PHP Code复制内容到剪贴板
  1. [  
  2.     'class' => 'yii\grid\CheckboxColumn',  
  3.     'header' => Html::checkBox('selection_all', false, [  
  4.         'class' => 'select-on-check-all',  
  5.         'label' => 'Check All',  
  6.     ]),  
  7.     'checkboxOptions' => function($model) {  
  8.         return [  
  9.             'class' => "selection",  
  10.             'value' => $model['id']  
  11.         ];  
  12.     },  
  13. ],  

 QQ截图20170510085655.jpg

 

结合GridView加全选：

PHP Code复制内容到剪贴板
  1.     <?= GridView::widget([  
  2.         'dataProvider' => $dataProvider,  
  3. // id是必须要加的，获取#grid下的select项  
  4.         'options' => ['class' => 'table table-bordered table-hover table-responsive','id' => 'grid'],  
  5.         'columns' => [  
  6. //            'id',  
  7.             [  
  8. // 信息id  
  9.                 'class' => 'yii\grid\CheckboxColumn',  
  10.                 'name' => 'id',  
  11.             ],  
  12.               
  13.         ],  
  14.     ]); ?>  

显示删除按钮，并加点击事件：

PHP Code复制内容到剪贴板
  1. <?= Html::a('批量删除', "javascript:void(0);", ['class' => 'btn btn-success gridview']) ?>  
  2.   
  3.   
  4. <?php  
  5. $this->registerJs(' 
  6. $(".gridview").on("click", function () { 
  7. //注意这里的$("#grid")，要跟我们第一步设定的options id一致 
  8.     var keys = $("#grid").yiiGridView("getSelectedRows"); 
  9.     console.log(keys); 
  10. }); 
  11. ');  
  12. ?>  

 

 

 Yii2 使用gii生成 gridview分页时候 显示第一页和最后一页 方法

在Yii2 使用gii生成 gridview分页时候 model中是ActiveDataProvider ，默认是没有第一页，最后一页的， 要想显示第一页和最后一页，不需要加载其他东西，只需要在view中增加个pager属性

PHP Code复制内容到剪贴板
  1. <?php  
  2. use yii\grid\GridView;  
  3. echo GridView::widget([  
  4.     'dataProvider' => $dataProvider,  
  5.     //每列都有搜索框 控制器传过来$searchModel = new ArticleSearch();   
  6.     //'filterModel' => $searchModel,  
  7.     'layout'=> '{items}<div class="text-right tooltip-demo">{pager}</div>',  
  8.      'pager'=>[  
  9.                //'options'=>['class'=>'hidden']//关闭自带分页  
  10.                'firstPageLabel'=>"First",  
  11.                 'prevPageLabel'=>'Prev',  
  12.                 'nextPageLabel'=>'Next',  
  13.                  'lastPageLabel'=>'Last',  
  14.       ],  
  15.     'columns' => [  
  16.         //['class' => 'yii\grid\SerialColumn'],//序列号从1开始  
  17.         // 数据提供者中所含数据所定义的简单的列  
  18.         // 使用的是模型的列的数据  
  19.         'id',  
  20.         'username',  
  21.         ['label'=>'文章类别',  /*'attribute' => 'cid',产生一个a标签,点击可排序*/  'value' => 'cate.cname' ],  
  22.         ['label'=>'发布日期','format' => ['date', 'php:Y-m-d'],'value' => 'created_at'],  
  23.         // 更复杂的列数据  
  24.         ['label'=>'封面图','format'=>'raw','value'=>function($m){  
  25.          return Html::img($m->cover,['class' => 'img-circle','width' => 30]);  
  26.         }],  
  27.         [  
  28.             'class' => 'yii\grid\DataColumn', //由于是默认类型，可以省略   
  29.             'value' => function ($data) {  
  30.                 return $data->name;   
  31.                 // 如果是数组数据则为 $data['name'] ，例如，使用   
  32.   
  33. SqlDataProvider 的情形。  
  34.             },  
  35.         ],  
  36.         [  
  37.          'class' => 'yii\grid\ActionColumn',  
  38.          'header' => '操作',   
  39.          'template' => '{delete} {update}',//只需要展示删除和更新  
  40.          /*'headerOptions' => ['width' => '80'],*/  
  41.          'buttons' => [  
  42.              'delete' => function($url, $model, $key){  
  43.                       return Html::a('<i class="glyphicon glyphicon-trash"></i> 删除',  
  44.                              ['artdel', 'id' => $key],   
  45.                              ['class' => 'btn btn-default btn-xs',  
  46.                               'data' => ['confirm' => '你确定要删除文章吗？',]  
  47.                              ]);  
  48.              },  
  49.             'update' => function($url, $model, $key){  
  50.                      return Html::a('<i class="fa fa-file"></i> 更新',  
  51.                             ['artedit', 'id' => $key],   
  52.                             ['class' => 'btn btn-default btn-xs']);  
  53.              },  
  54.             ],  
  55.          ],  
  56.     ],  
  57. ]);  
  58. ?>  

 

 

gridview 上面加搜索表单

1.jpg

PHP Code复制内容到剪贴板
  1. <?php $form = ActiveForm::begin([  
  2.     'action' => ['index'],  
  3.     'method' => 'get',  
  4.     'id' => 'cateadd-form',  
  5.     'options' => ['class' => 'form-horizontal'],  
  6. ]); ?>  
  7.   
  8. <?= $form->field($searchModel, 'tag_name', [  
  9.     'options' => ['class' => ''],  
  10.     'inputOptions' => ['placeholder' => '文章搜索', 'class' => 'input-sm form-control'],  
  11. ])->label(false) ?>  
  12.   
  13. <span class="input-group-btn">  
  14.     <?= Html::submitButton('Go!', ['class' => 'btn btn-sm btn-primary']) ?>  
  15. </span>  
  16. <?php ActiveForm::end(); ?>  

 

 

本文来自于：http://www.jb51.net/article/82854.htm

上一篇 yii2.0 Activeform表单部分组件使用方法
下一篇 yii2-Html助手
相关的文章
Powered by yoyo苏ICP备15045725号