Yii2 a method to modify data directly by the GridView List page _php instance

What does that mean? I come to the simple description, small knitting sister Ask is like this, you see AH, you this list of data, can I directly on the list to make a point on directly modify Ah, I point in to modify how much trouble, too inconvenient. This Nima, this demand, is not really want to give her a mallet.

OK, let's take a look today at how to use the GridView implementation of the YII2 in the list of directly modified functions, very comprehensive oh, we try to give examples of various types of attributes.

The first step is to deploy the Yii2-grid.

Using composer to install Yii2-grid

Composer require Kartik-v/yii2-grid "@dev"

If you need to let you output token in the process of installation, this is the need for you to login to your GitHub account, through Setting>personal access tokens Get token value after you enter your token value, return to the good.

Once installed, we will configure the module as follows, which must be configured

' Modules ' => ['
GridView ' => ['
class ' => ' \kartik\grid\module '
]
];

We said before, we have to deploy the Yii2-grid, download configuration, we open the view file and refer to the following code to modify your file

Use Yii\grid\gridview;
This shields off Yii's gridview,user we just installed the GridView use
kartik\grid\gridview;
<?= Gridview::widget ([
//...
] Export ' => false,
' columns ' => [
//...
],
?>

In the code above we just need to add an ' export ' => false, and your original GridView does not need to be changed.

Then we install yii2-editable.

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

Once installed, we introduced editable in the file that we just configured the GridView

Use kartik\editable\editable;

First of all, introduce the textinput type of modification, as shown below

From the above, you can easily see the effect of editing, directly paste code

[
' attribute ' => ' title ',
' class ' => ' Kartik\grid\editablecolumn ',
],

But as we can see from the picture above, it's not very convenient to modify the window, so we'll look at the convenient operation.

[
' attribute ' => ' title ',
' class ' => ' Kartik\grid\editablecolumn ',
' editableoptions ' =>[
' Aspopover ' => false,
],
],

Just click on the property value you want to modify to change it directly, let's see what the problem is.

Perhaps you found that the edit box width is too small, the operation is not very convenient, we change the input to textarea will be better? Try, of course, you can also give the current cell to specify Headeroptions set width, about the GridView common operations can be clicked reference

Look at the picture on the effect is much better, directly paste code

[
' attribute ' => ' title ',
' class ' => ' Kartik\grid\editablecolumn ',
' editableoptions ' =>[
' Aspopover ' => false,
' InputType ' =>\kartik\editable\editable::input_textarea,
' options ' = > [
' Rows ' => 4, 
],
],
],

Some students are very curious to point to the figure of the two buttons, one is reset button, the other is the application button, reset fortunately, it is easy to understand, but, why the point of the application button seems to have been in the process of the meaning of it? Don't worry, from the beginning to now even next, we will first explain the configuration in view, in fact, you click on the Application button after the asynchronous request the back end, we later said in detail.

What if your column is of a numeric type? Simple, input directly modify the good, but if you want the following screenshot of the effect, you need to continue to use composer install touch spin widget

Require Kartik-v/yii2-widget-touchspin "@dev"

After installation, let's look at how the properties of the numeric type are modified

Third, regarding the dropdown box type modification, we assume the field Is_delete value 1 shows 2 deletes and the database deposit value is 1 2 This type of numeral, see the effect chart and then we paste the code

The left and right sides are two attributes, in order to make a comparison, the left-hand side is not modifiable attribute display, 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, we explain the next date components and time components, first screenshot to see the effect, and then in the installation

Date component
Composer require kartik-v/yii2-widget-datepicker "@dev"
//Time component
Composer require kartik-v/ Yii2-widget-datetimepicker "*"
//Date component
[
' attribute ' => ' created_at ',//
The width of this set table
//' Headeroptions ' => [' width ' => ' 150px '],
' class ' => ' Kartik\grid\editablecolumn ',
' editableoptions ' =>[
' InputType ' =>\kartik\editable\editable::input_date,
' Aspopover ' => false,
// This sets the width of our component
' contentoptions ' => [' style ' => ' width:180px '],
' options ' => [
' pluginoptions ' = > [/
/Set our date components ' format '
=> ' yyyy-mm-dd ',]]
,
],
' format ' => [' Date ', ' Y-m-d '],
],
//Time component
[
' attribute ' => ' updated_at ',
//' headeroptions ' => [' width ' = > ' 150px '],
' class ' => ' Kartik\grid\editablecolumn ',
' editableoptions ' =>[
' InputType ' >\kartik\editable\editable::input_datetime,
' Aspopover ' => false,
' contentoptions ' => [' style ' = > ' width:250px '],
],

Basically in this 4 type bar, view configuration Well, we need to configure the Controller layer for asynchronous operation, let's see how it operates.

Disclaimer: If your GridView is within the view article/index, then you need to operate within 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;
The other here is ignored, roughly refer to this title
}
$out = Json::encode ([' Output ' => $output, ' message ' => ']);
echo $out;
return;
}
return $this->render (' index ', [
' Searchmodel ' => $searchModel,
' Dataprovider ' => $dataProvider,
]);
}

About the small series to introduce the YII2 GridView Implementation List page to modify the data directly to introduce you here, I hope to help you, if you want to learn more content please pay attention to cloud Habitat community website.