Let's talk about how yii2-GridView implements direct modification of data on the list page, and talk about yii2-gridview_PHP tutorial

Talk about how yii2-GridView can directly modify data on the list page, talk about yii2-gridview

Author: Bailang Source: http://www.manks.top/yii2_gridview_advanced .html The copyright of this article belongs to the author, and you are welcome to reprint it. However, this statement must be retained without the author's consent, and a link to the original text must be provided in an obvious position on the article page. Otherwise, we reserve the right to pursue legal liability.

What does it 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?
Let me make it clear first that this article involves about 6 picture effects. There are pictures in the original article for reference.
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 <span>require</span> 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' =><span> [
   </span>'gridview' =><span>  [
        </span>'class' => '\kartik\grid\Module'<span>
    ]
];</span>

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

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

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 <span>require</span> kartik-v/yii2-editable "@dev"

After installation, we introduce editable in the file that just configured the gridview
use kartikeditableEditable;
First introduce the modification of the textInput type, as shown below

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

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

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

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

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

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

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

<span>require</span> 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

Continue reading