做者：白狼 出处：http://www.manks.top/yii2_gridview_advanced.html 本文版权归做者，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。html

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

先声明哈，本文涉及大概6张图片效果，原文有图片可参考。

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

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

利用composer安装yii2-gridgithub

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咱们刚刚安装的gridview

usekartik\grid\GridView;= GridView::widget([//......

'export' => false,

'columns' =>[//......

],

?>

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

而后咱们安装yii2-editablecomposer

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

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

use kartik\editable\Editable;

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

从上图中能够很轻松的看到编辑的效果，直接贴代码异步

['attribute' => 'title',

'class'=>'kartik\grid\EditableColumn',],

可是从上图中咱们也看到了，弹窗式修改呢不是很方便，咱们接下来看看方便点的操做方式ui

['attribute' => 'title',

'class'=>'kartik\grid\EditableColumn',

'editableOptions'=>['asPopover' => false,],],

只须要对要修改的属性值点击一下能够直接进行修改，咱们来看看这样会有什么问题

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

看图片上果真效果好不少，直接贴代码

['attribute' => 'title',

'class'=>'kartik\grid\EditableColumn',

'editableOptions'=>['asPopover' => false,

'inputType'=>\kartik\editable\Editable::INPUT_TEXTAREA,

'options' =>['rows' => 4,],],],

有同窗很好奇的点了图中的两个按钮，一个是重置按钮，另外一个是应用按钮，重置还好，很容易理解，可是嘛，为啥点了应用按钮就貌似一直在处理中的意思呢？别急别急，从一开始到如今乃至接下来，咱们都将先讲解view中的配置，其实这里你点击应用按钮后也就异步请求了后端，咱们后面详细的说道。

若是你的column是数字类型的呢？简单嘛，input内直接修改就行了，可若是你想要下面截图中的效果，须要你继续继续利用composer安装touch spin widget

require kartik-v/yii2-widget-touchspin "@dev"

安装完毕后，咱们看看数字类型的属性的修改方式

第三种，关于下拉框式的修改，咱们假定字段is_delete值1显示 2删除且数据库存的值是1 2这种数字类型，看效果图而后咱们再贴代码