Yii2 GridView implements the method of directly modifying data on the list page, yii2gridview_PHP tutorial

Yii2 GridView implements the method of directly modifying data on the list page. What does yii2gridview

mean? Let me briefly describe it. The requirements raised by the editor are as follows. Look, can I just click on the data on your list page to modify it directly? I will click in and modify it more. Trouble, it's so inconvenient. This damn thing, this need, do you really want to give her a blow?

ok, today we will take a look at how to use gridview to implement the function of direct modification on the list in Yii2. It is very comprehensive. We try our best to give examples for various types of attributes.

The first step is to deploy yii2-grid

Use composer to install yii2-grid

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

If you need to output the token during the installation process, you need to log in to your github account at this time, obtain the token value through setting>personal access tokens, enter your token value, and press Enter.

After installation, we configure the module as follows, this is necessary

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

As we said before, you must first deploy yii2-grid. After downloading and configuring, we open the view file and modify your file by referring to the following code

// use yii\grid\GridView;
//这里屏蔽掉yii的gridview，user我们刚刚安装的gridview
use kartik\grid\GridView;
<&#63;= GridView::widget([
//......
'export' => false,
'columns' => [
//......
],
&#63;>

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

Then we install yii2-editable

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

After installation, we introduce editable

into the file where we just configured the gridview

use kartik\editable\Editable;

First introduce the modification of textInput type, as shown below

You can easily see the editing effect from the picture above, just paste the code directly

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

But as we can see from the picture above, pop-up modification is not very convenient. Let’s take a look at a more convenient operation method

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

You only need to click on the attribute value you want to modify to modify it directly. Let’s see what problems this will cause

Perhaps you have discovered that the width of the edit box is too small and the operation is not very convenient. Would it be better if we change the input to textarea? Give it a try. Of course, you can also specify headerOptions to set the width of the current cell. For common gridview operations, please click for reference

Looking at the picture, the effect is indeed much better, just paste the code

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

Some students were very curious and clicked the two buttons in the picture. One is the reset button and the other is the apply button. Reset is okay and easy to understand, but why does it seem to keep clicking after clicking the apply button? What does "processing" mean? Don't worry, don't worry, from the beginning to now and even next, we will first explain the configuration in the view. In fact, after you click the apply button here, you will request the backend asynchronously. We will explain it in detail later.

What if your column is of numeric type? It’s easy, just modify it directly in the input, but if you want the effect in the screenshot below, 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 to modify the numeric attributes

The third type, regarding the drop-down box modification, we assume that the field is_delete value 1 displays 2 deleted and the value of the data inventory is a numeric type of 1 2. Look at the renderings and then we will paste the code

There are two attributes on the left and right sides. For comparison and explanation, the left side shows the attributes 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 component and time component. First take a screenshot to see the effect, and then install it

//日期组件
composer require kartik-v/yii2-widget-datepicker "@dev"
//时间组件
composer require kartik-v/yii2-widget-datetimepicker "*"
//日期组件
[
'attribute' => 'created_at',
//这个设定表格的宽度
// 'headerOptions' => ['width' => '150px'],
'class'=>'kartik\grid\EditableColumn',
'editableOptions'=>[
'inputType'=>\kartik\editable\Editable::INPUT_DATE,
'asPopover' => false,
//这个设定我们组件的宽度
'contentOptions' => ['style'=>'width:180px'],
'options' => [
'pluginOptions' => [
//设定我们日期组件的格式
'format' => 'yyyy-mm-dd',
]
],
],
'format' => ['date', 'Y-m-d'],
],
//时间组件
[
'attribute' => 'updated_at',
// 'headerOptions' => ['width' => '150px'],
'class'=>'kartik\grid\EditableColumn',
'editableOptions'=>[
'inputType'=>\kartik\editable\Editable::INPUT_DATETIME,
'asPopover' => false,
'contentOptions' => ['style'=>'width:250px'],
],
],

Basically, these are the 4 types. After the view is configured, we need to configure the controller layer for asynchronous operation. Let’s see how it works.

Statement: If your gridview is within the view article/index, then you need to operate within the index of the article controller for the next operation.

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;
// 其他的这里就忽略了，大致可参考这个title
}
$out = Json::encode(['output'=>$output, 'message'=>'']);
echo $out;
return;
}
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
}

This is the introduction to the Yii2 GridView method of directly modifying data on the list page introduced by the editor. I hope it will be helpful to you. If you want to know more, please pay attention to the Bangkejia website.

http://www.bkjia.com/PHPjc/1127891.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1127891.htmlTechArticleYii2 GridView implements the method of directly modifying data on the list page. What does yii2gridview mean? Let me briefly describe the needs mentioned by the editor. Look, your list page...