Yii2 GridView实现列表页直接修改数据的方法

什么意思呢？我来简单的描述下，小编妹子提的需求是这样的，你看啊，你这列表页的数据，能不能我就直接在列表上进行点一下就直接修改啊，我再点进去修改多麻烦，太不方便了。这尼玛，这需求，是不是真想给她一棒槌。

ok,我们今天就来看看在yii2中如何去利用gridview实现列表上直接修改的功能，很全面哦，我们尽量各种类型的属性都给出实例。

第一步，我们先来部署好yii2-grid

利用composer安装yii2-grid

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

如果你在安装的过程中需要让你输出Token，此时也就是需要你登录你的github帐号,通过setting>personal access tokens获取token值后输入你的token值，回车就好。

安装好了之后，我们对module进行如下配置，这个是必须要配置的

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

前面我们说了，要先把yii2-grid部署好，下载配置好之后，我们打开视图文件并参考下面的代码修改你的文件

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

上面代码中我们只需要添加一项 'export' => false, 即可，你原先的gridview无需改动。

然后我们安装yii2-editable

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

安装好了后，我们在刚才配置好gridview的文件中引入editable

use kartik/editable/Editable;

首先介绍下textInput类型的修改，图如下

从上图中可以很轻松的看到编辑的效果，直接贴代码

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

但是从上图中我们也看到了，弹窗式修改呢不是很方便，我们接下来看看方便点的操作方式

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

只需要对要修改的属性值点击一下可以直接进行修改，我们来看看这样会有什么问题

也许你发现了，编辑框的宽度太小了，操作不是很方便，我们把input改为textarea会不会好点？试试看，当然你也可以给当前单元格指定headerOptions设定宽度，关于gridview常见操作可点击参考