Yii2GridView common operations-Wolf stack

Yii2GridView common operations-White Wolf stack author: White Wolf Source: http://www.manks.top/article/yii2_gridview

The copyright of this article belongs to the Author. You are welcome to repost this article, but you must keep this statement without the author's consent and provide the original article connection clearly on the article page. Otherwise, you will be entitled to pursue legal liability.

I have collected a summary of most of the problems that occur in the GridView on the network. I hope this will help you.

If there is a common problem with the GridView that is not mentioned below, leave a message below and I will add it.

• Drop-down search

• Format and search for dates

• Display based on parameters

• Click to jump

• Show image

• Html rendering

• Custom button

• Set the width and other styles

• Custom field

• Customize the row style

• Add button to call js operation

Yii2 GridView drop-down search implementation case study Yii2 GridView date formatting and implement date searchable case Show case of a column

Let's give a simple example.

Condition: there is a get parameter type.

Requirement: the column name is displayed only when the value of type is equal to 1. Otherwise, the column is not displayed.

The code is implemented as follows:

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

The implementation method is also very simple.

Link clickable jump case

This is very similar to the html rendering effect we will talk about next. here we will talk about the format of the column attribute value. which formats can be used to view the file yii \ i18n \ Formatter. php and various formats can be solved

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

Show Image cases

Same as above. you only need to specify the format as image. The second parameter of format can be used to set the image size. for details, refer to the following code.

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

Html rendering case

For example, we have a field marked as title, but this title is different. ta contains html tags and we do not want to display them on the page.

Title123

In this form, we want title123 to be displayed in the form of a p tag. for the code, refer to the following. you only need to specify the format as raw.

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

Custom button cases

We do not want to delete a button on the list page. we want to add a button such as getting xxx. how can this problem be solved? Here you need to set the ActionColumn class, modify the configuration item template, and add the get-xxx added to the template in the buttons item.

['Class' => 'yii \ grid \ actioncolumn', 'template' => '{get-xxx} {view} {update }', 'header' => 'operation', 'buttons' => ['get-xxx' => function ($ url, $ model, $ key) {return Html :: a ('Get xxx', $ url, ['title' => 'get xxx']) ;},],],

Case Study of setting width

For example, our title column is too long. can you set the width of this column for me first?

Answer: Yes.

See the example:

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

You only need to specify the configuration item headerOptions.

Case Study of custom fields

When is it customized? Here we add a column in the table and the database does not have a corresponding column. Assume that we add a column of order consumption amount money and this field does not exist in the table.

['Attribute' => 'consumption amount', 'value' => function ($ model) {// you can associate and obtain it based on other fields in the table.}],

Customize the row style

Some friends said that the row and row colors of the gridview table generated by gii are not obvious, and it seems uncomfortable. I am so embarrassed. we will not be held accountable for the specific problem. Let's see how to define the row style.

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

The previous operations are based on column columns. here, we need to pay attention to configuring rowOptions because of row control. In addition, the custom label-red and label-green must have corresponding style implementations. here we will look at the actual effect of the page.

Add button to call js operation case

The product manager is coming over there. Mr. Wang, you have a frequent function of modifying the status. you need to click the details page to modify the status each time, can I click the mouse on the list page to modify it successfully?

In fact, it is an asynchronous request operation in the forward state. let's take a look at how it is implemented in the gridview.

['Class' => 'yii \ grid \ actioncolumn', 'header' => 'operation ', 'template' => '{view} {update-status}', 'buttons' => ['UPDATE-status' => function ($ url, $ model, $ key) {return Html: a ('update status', 'javascript:; ', ['onclick' => 'update _ status (this ,'. $ model-> id. ');']);},],],

We still need to write the js implementation method update_status on the page. for details about how to load js at the bottom of the page, click the reference.