Let's talk about yii2-GridView how to implement list page direct modification of data, talk about yii2-gridview

Let's talk about yii2-GridView how to implement list page direct modification of data, talk about yii2-gridview

Author: White Wolf Source: http://www.manks.top/yii2_gridview_advanced.html this article copyright to the author, welcome to reprint, but without the author's consent must retain this paragraph of the statement, and in the Article Page clearly given the original connection, otherwise, you are entitled to pursue legal liability.

What does it mean? Let me briefly describe the requirements raised by the mini-editor. You see, the data on your list page, can I just click it on the list and modify it directly? It is too inconvenient for me to click it again. This Nima, do you really want to give her a bang.
This article involves about 6 images. For more information, see the original article.
OK. Let's take a look at how to use the gridview function in yii2 to directly modify the list. It's comprehensive. We try to provide instances for all types of attributes.

Step 1: deploy the yii2-grid first.
Install yii2-grid with composer

composer require kartik-v/yii2-grid "@dev"

 

If you need to output the Token during the installation process, You need to log on to your github account, get the token value through setting> personal access tokens, and enter your token value, just press Enter.
After the module is installed, we configure the module as follows, which must be configured.

'modules' => [   'gridview' =>  [        'class' => '\kartik\grid\Module'    ]];

 

We mentioned above, we need to first deploy the yii2-grid, download the configuration, we open the View File and refer to the following code to modify your file

// Use yii \ grid \ GridView; // The gridview of yii is blocked here. user: The gridviewuse kartik \ grid \ GridView we just installed. <? = GridView: widget ([//... export '=> false, 'columns' => [// ......],?>

 

In the above Code, we only need to add an item 'Port' => false. You do not need to change the original gridview.

Then we install yii2-editable

composer require kartik-v/yii2-editable "@dev"

 

After the installation, we introduced editable in the file that Just configured the gridview.
Use kartik \ editable \ Editable;
The following figure shows how to modify the textInput type.

You can easily see the editing effect and paste the Code directly.

[    'attribute' => 'title',    'class'=>'kartik\grid\EditableColumn',],

 

But we can also see that it is not very convenient to modify the window. Let's take a look at the convenient operation method.

[    'attribute' => 'title',    'class'=>'kartik\grid\EditableColumn',    'editableOptions'=>[        'asPopover' => false,    ],],

 

You only need to click on the attribute value to be modified to directly modify the attribute value. Let's take a look at the problem.

You may find that the width of the edit box is too small and the operation is not very convenient. Will it be better if we change the input to textarea? You can also specify headerOptions for the current cell to set the width. For more information about common gridview operations, see

The image looks a lot better, and you can paste the Code directly.

[    'attribute' => 'title',    'class'=>'kartik\grid\EditableColumn',    'editableOptions'=>[        'asPopover' => false,        'inputType'=>\kartik\editable\Editable::INPUT_TEXTAREA,        'options' => [            'rows' => 4,         ],    ],],

 

Some people are curious to click the two buttons in the figure. One is the reset button, and the other is the application button. The Reset is fine and easy to understand. However, why does it mean that the app button is always being processed? Don't worry. from the beginning to the present, we will explain the configuration in view first. In fact, after you click the application button, the backend is asynchronously requested.

What if your column is Numeric? Simply modify the input directly. If you want the following effects, you need to continue to use composer to install the touch spin widget.

require kartik-v/yii2-widget-touchspin "@dev"

 

After the installation is complete, let's take a look at how the numeric type attributes are modified.

Third, for the change in the drop-down box, we assume that the is_delete value of the Field 1 shows 2 deleted and the data inventory value is 1 2. Then, let's paste the code.

Continue reading