A brief analysis of common operations of GridView in Yii2, a brief analysis of yii2gridview

A brief analysis of the common operations of GridView in Yii2, a brief analysis of yii2gridview

This article is the editor's collection of most of the problems that occur in GridView on the Internet. This article is here to make a summary Share it on the Bangkejia platform for everyone’s reference.

If there are any frequently asked questions about GridView that are not mentioned below, leave a message below and I will add them.

Drop down search

Date formatting and date searchability

Whether to display based on parameters

The link can be clicked to jump

Show pictures

html rendering

Custom button

Set width and other styles

Custom fields

Custom row style

Add button to call js operation

yii2 GridView drop-down search implementation case tutorial

Yii2 GridView date formatting and date searchability case

Whether to display a certain column of cases

Let’s take a simple case

Condition: There is a get parameter type

Requirement: The column name will be displayed only when the value of type is equal to 1, otherwise the column will not be displayed

The code is implemented as follows:

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

Copy after login

The implementation method is also very simple.

Link can be clicked to jump to the case

This is very similar to the html rendering effect we are going to talk about next. What we are going to talk about here is the attribute value format of the column. For specific formats, you can view the file yiii18nFormatter.php. Various formats can be solved

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

Copy after login

Show picture case

Same as above, here you only need to specify the format format as image. The second parameter of format can set the image size. You can refer to the code below

[
'label' => '头像',
'format' => [
'image', 
[
'width'=>'84',
'height'=>'84'
]
],
'value' => function ($model) { 
return $model->image; 
}
],

Copy after login

html rendering case

What does it mean? For example, we have a field marked title, but this title is different. It contains html tags. We don’t want to display the form

title123

on the page. We If you want title123 to be displayed in the form of a p tag, the code can be referenced as follows. You only need to specify the format as raw form

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

Copy after login

Custom button case

Often we don’t want to delete the button on the list page, but want to add a button such as Get xxx. How to do it? Here you need to set up the ActionColumn class, modify the configuration item template and add the get-xxx added in the template to the buttons item

[
'class' => 'yii\grid\ActionColumn',
'template' => '{get-xxx} {view} {update}',
'header' => '操作',
'buttons' => [
'get-xxx' => function ($url, $model, $key) { 
return Html::a('获取xxx', $url, ['title' => '获取xxx'] ); 
},
],
],

Copy after login

Set width case

To give a simple example, our title column is too long. Can you set the width of this column for me first?

Answer: Yes.

See example:

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

Copy after login

You only need to specify the configuration item headerOptions.

Custom field case

When to customize? Here we mean adding a column to the table and the corresponding column does not exist in the database. Suppose we add a new column of order consumption amount money and this field does not exist in the table

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

Copy after login

Custom row style

Some friends said that in the gridview table generated by GII, the color of the rows is not obvious, and it looks uncomfortable. I am obedient. We will not investigate the specific reasons for the discomfort. Let’s take a look at how to define row styles

<&#63;= GridView::widget([
// ......
'dataProvider' => $dataProvider,
'rowOptions' => function($model, $key, $index, $grid) {
return ['class' => $index % 2 ==0 &#63; 'label-red' : 'label-green'];
},
// ......
]); &#63;>

Copy after login

The previous operations are all based on columns. Since this is the control of rows, we need to pay a little attention when configuring rowOptions. In addition, the customized label-red and label-green need to be implemented with corresponding styles. Here we take a look at the actual effect of the page

Add button call js operation case

The product manager over there came over, Xiao Wang, you have this function of modifying the status very frequently. Every time you have to click on the details page before you can modify it, can I successfully modify it with just one click of the mouse on the list page? Woolen cloth?

In fact, it is an asynchronous request that operates the status of the current row. Let’s take a look at how it is implemented in gridview.

[
'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.');']); },
],
],

Copy after login

We need to write js on the page to implement the update_status method. Please click for reference on how to load js at the bottom of the page

Supplement: Commonly used functions and techniques of GridView widgets in development.

The data grid or GridView widget is one of the most powerful widgets in Yii.

It has an attribute called dataProvider. This attribute can provide an example of a data provider and can display the provided data, that is, using a set of column configurations of the yiigridGridView::columns attribute to render each row of data in a table. .

For example,

use yii\grid\GridView;
echo yii\grid\GridView::widget([
'dataProvider' => $dataProvider,
]);

Copy after login

1. Table columns

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

<&#63;php
use yii\grid\GridView;
echo GridView::widget([
'dataProvider' => $dataProvider,
//表格列值搜索功能，注意一定要配合attribute才会显示
//$searchModel = new ArticleSearch();
'filterModel' => $searchModel,
//重新定义分页样式
'layout'=> '{items}<div class="text-right tooltip-demo">{pager}</div>',
'pager'=>[
//'options'=>['class'=>'hidden']//关闭分页
'firstPageLabel'=>"First",
'prevPageLabel'=>'Prev',
'nextPageLabel'=>'Next',
'lastPageLabel'=>'Last',
]
'columns' => [
['class' => 'yii\grid\SerialColumn'],//序列号从1自增长
// 数据提供者中所含数据所定义的简单的列
// 使用的是模型的列的数据
'id',
'username',
// 更复杂的列数据
[
'class' => 'yii\grid\DataColumn', //由于是默认类型，可以省略 
'value' => function ($data) {
return $data->name; 
// 如果是数组数据则为 $data['name'] ，
例如，使用 SqlDataProvider 的情形。
},
],
['label'=>'标题','value' => 'title'],
['label'=>'文章内容','format' => 'html','value' => 'content'],
[
'label'=>'文章类别', 
/*'attribute' => 'cid',产生一个a标签,点击可排序*/ 
'value' => 'cate.cname' //关联表
],
[
//动作列yii\grid\ActionColumn 
//用于显示一些动作按钮，如每一行的更新、删除操作。
'class' => 'yii\grid\ActionColumn',
'header' => '操作', 
'template' => '{delete} {update}',//只需要展示删除和更新
'headerOptions' => ['width' => '240'],
'buttons' => [
'delete' => function($url, $model, $key){
return Html::a('<i class="fa fa-ban"></i> 删除',
['del', 'id' => $key], 
[
'class' => 'btn btn-default btn-xs',
'data' => ['confirm' => '你确定要删除文章吗？',]
]
);
}, 
],
],

],
]);
&#63;>

Copy after login

1. 处理时间

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

[
'label'=>'更新日期',
'format' => ['date', 'php:Y-m-d'],
'value' => 'updated_at'
],
//or
[
//'attribute' => 'created_at',
'label'=>'更新时间',
'value'=>function($model){
return date('Y-m-d H:i:s',$model->created_at); 
},
'headerOptions' => ['width' => '170'],
],

Copy after login

2. 处理图片

[
'label'=>'封面图',
'format'=>'raw',
'value'=>function($m){
return Html::img($m->cover,
['class' => 'img-circle',
'width' => 30]
);
}
],

Copy after login

3. 数据列有链接

[
'attribute' => 'title',
'value' => function ($model, $key, $index, $column) {
return Html::a($model->title, 
['article/view', 'id' => $key]);
},
'format' => 'raw',
],

Copy after login

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

[
'attribute' => 'sex', 
'value'=>function ($model,$key,$index,$column){
return $model->sex==1&#63;'男':'女'; 
}，
//在搜索条件（过滤条件）中使用下拉框来搜索
'filter' => ['1'=>'男','0'=>'女'],
//or
'filter' => Html::activeDropDownList($searchModel,
'sex',['1'=>'男','0'=>'女'],
['prompt'=>'全部']
)
],
[
'label'=>'产品状态', 
'attribute' => 'pro_name', 
'value' => function ($model) {
$state = [
'0' => '未发货',
'1' => '已发货',
'9' => '退货，已处理',
];
return $state[$model->pro_name];
},
'headerOptions' => ['width' => '120'] 
]

Copy after login

帮客之家推荐阅读：

浅析Yii2中GridView常见操作

yii2 页面底部加载css和js的技巧

浅析Yii2 GridView 日期格式化并实现日期可搜索教程

浅析Yii2 GridView实现下拉搜索教程

以上内容是针对Yii2中GridView常见操作的全部介绍，希望对大家有所帮助！