Yii2GridView: how to directly modify data on the list page

This article mainly introduces how to directly modify data on the Yii2GridView list page. I think it is of great reference value. I would like to share it with the network manager home platform. if you need it, please refer

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.

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;
 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.

The left and right sides are two properties. for comparison, the left side is an attribute display that cannot be modified. the code is as follows:

['attribute' => 'is_delete','class'=>'kartik\grid\EditableColumn','editableOptions'=>['inputType'=>\kartik\editable\Editable::INPUT_DROPDOWN_LIST,'asPopover' => false,'data' => Article::itemAlias('is_delete'),],'value' => function ($model) {return Article::itemAlias('is_delete', $model->is_delete);},'filter' => Article::itemAlias('is_delete'),],

Fourth, let's explain the date and time components, first view the results, and then install

// Date component composer require kartik-v/yii2-widget-datepicker "@ dev" // Time component composer require kartik-v/yii2-widget-datetimepicker "*" // date component ['attribute' =>' created _ ', // set the table width // 'headeroptions' => ['width' => '150px '], 'class' => 'kartik \ grid \ EditableColumn ', 'editableoptions' => ['inputtype' => \ kartik \ editable \ Editable: INPUT_DATE, 'aspover '=> false, // set the width of our component 'contentopexception' => ['style' => 'width: 180px '], 'options' => ['ininoptions' => [// set the format of our date component 'format' => 'yyyy-mm-DD',],], 'format' => ['date', 'Y-m-d'],], // Time component ['attribute' => 'updated _ ', // 'headeroptions' => ['width' => '150px '], 'class' => 'kartik \ grid \ EditableColumn ', 'editableoptions' => ['inputtype' => \ kartik \ editable \ Editable: INPUT_DATETIME, 'aspover '=> false, 'tentoptions' => ['style' => 'width: 250px '],

Basically, here are the four types. After The view is configured, we need to configure the controller layer for asynchronous operations. let's see how it works.

Declaration: If your gridview is in the View article/index, you need to perform the following operations in the index of the article controller.

Use yii \ helpers \ Json; public function actionIndex () {$ searchModel = new ArticleSearch (); $ dataProvider = $ searchModel-> search (Yii :: $ app-> request-> queryParams); if (Yii: $ app-> request-> post ('haseditable') {$ id = Yii :: $ app-> request-> post ('editablekey'); $ model = Article: findOne (['id' => $ id]); $ out = Json :: encode (['output' => '', 'message' =>'']); $ posted = current (
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.
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;
  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.
The left and right sides are two properties. for comparison, the left side is an attribute display that cannot be modified. the code is as follows:
['attribute' => 'is_delete','class'=>'kartik\grid\EditableColumn','editableOptions'=>['inputType'=>\kartik\editable\Editable::INPUT_DROPDOWN_LIST,'asPopover' => false,'data' => Article::itemAlias('is_delete'),],'value' => function ($model) {return Article::itemAlias('is_delete', $model->is_delete);},'filter' => Article::itemAlias('is_delete'),],
Fourth, let's explain the date and time components, first view the results, and then install
// Date component composer require kartik-v/yii2-widget-datepicker "@ dev" // Time component composer require kartik-v/yii2-widget-datetimepicker "*" // date component ['attribute' =>' created _ ', // set the table width // 'headeroptions' => ['width' => '150px '], 'class' => 'kartik \ grid \ EditableColumn ', 'editableoptions' => ['inputtype' => \ kartik \ editable \ Editable: INPUT_DATE, 'aspover '=> false, // set the width of our component 'contentopexception' => ['style' => 'width: 180px '], 'options' => ['ininoptions' => [// set the format of our date component 'format' => 'yyyy-mm-DD',],], 'format' => ['date', 'Y-m-d'],], // Time component ['attribute' => 'updated _ ', // 'headeroptions' => ['width' => '150px '], 'class' => 'kartik \ grid \ EditableColumn ', 'editableoptions' => ['inputtype' => \ kartik \ editable \ Editable: INPUT_DATETIME, 'aspover '=> false, 'tentoptions' => ['style' => 'width: 250px '],
Basically, here are the four types. After The view is configured, we need to configure the controller layer for asynchronous operations. let's see how it works.
Declaration: If your gridview is in the View article/index, you need to perform the following operations in the index of the article controller.
___FCKpd___11
For more information about how to directly modify data on the Yii2 GridView implementation list page, visit the website.
POST ['article']); $ post = ['article' => $ posted]; if ($ model-> load ($ post )) {$ model-> save (); $ output = ''; isset ($ posted ['title']) & $ output = $ model-> title; // others are ignored here. For details, refer to this title} $ out = Json: encode (['output' => $ output, 'message' => '']); echo $ out; return;} return $ this-> render ('index', ['searchmodel' => $ searchModel, 'dataprovider' => $ dataProvider,]);}

For more information about how to directly modify data on the Yii2 GridView implementation list page, visit the website.