Yii2GridView implements the method of directly modifying data on the list page. yii2gridview_PHP tutorial

Yii2GridView implements the method of directly modifying data on the list page, yii2gridview. How does Yii2GridView directly modify data on the list page? what does yii2gridview mean? Let me briefly describe the requirement raised by Xiao Bian's sister. you see, on your list page, Yii2 GridView implements the method of directly modifying data on the list page, yii2gridview

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. <? = 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.

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 ($ _ 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,]);}

The method for directly modifying data on the Yii2 GridView implementation list page introduced by the editor is introduced here. I hope it will be helpful to you, if you want to learn more, please stay tuned to the help House website.

Http://www.bkjia.com/PHPjc/1127891.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1127891.htmlTechArticleYii2 GridView realize the method of directly modifying data on the list page, what does yii2gridview mean? Let me briefly describe the requirements raised by the mini-editor. you see, on your list page...