谈谈yii2-GridView如何实现列表页直接修改数据 - 白狼栈

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

什么意思呢？我来简单的描述下，小编妹子提的需求是这样的，你看啊，你这列表页的数据，能不能我就直接在列表上进行点一下就直接修改啊，我再点进去修改多麻烦，太不方便了。这尼玛，这需求，是不是真想给她一棒槌。
先声明哈，本文涉及大概6张图片效果，原文有图片可参考。
ok,我们今天就来看看在yii2中如何去利用gridview实现列表上直接修改的功能，很全面哦，我们尽量各种类型的属性都给出实例。

第一步，我们先来部署好yii2-grid
利用composer安装yii2-grid

composer <span style="color: #0000ff;">require</span> kartik-v/yii2-grid "@dev"

 

如果你在安装的过程中需要让你输出Token，此时也就是需要你登录你的github帐号,通过setting>personal access tokens获取token值后输入你的token值，回车就好。
安装好了之后，我们对module进行如下配置，这个是必须要配置的

'modules' =><span style="color: #000000;"> [
   </span>'gridview' =><span style="color: #000000;">  [
        </span>'class' => '\kartik\grid\Module'<span style="color: #000000;">
    ]
];</span>

 

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

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

 

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

然后我们安装yii2-editable

composer <span style="color: #0000ff;">require</span> kartik-v/yii2-editable "@dev"

 

安装好了后，我们在刚才配置好gridview的文件中引入editable
use kartik\editable\Editable;
首先介绍下textInput类型的修改，图如下

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

<span style="color: #000000;">[
    </span>'attribute' => 'title',
    'class'=>'kartik\grid\EditableColumn',<span style="color: #000000;">
]</span>,

 

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

<span style="color: #000000;">[
    </span>'attribute' => 'title',
    'class'=>'kartik\grid\EditableColumn',
    'editableOptions'=><span style="color: #000000;">[
        </span>'asPopover' => <span style="color: #0000ff;">false</span>,<span style="color: #000000;">
    ]</span>,<span style="color: #000000;">
]</span>,

 

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

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

看图片上果然效果好很多，直接贴代码

<span style="color: #000000;">[
    </span>'attribute' => 'title',
    'class'=>'kartik\grid\EditableColumn',
    'editableOptions'=><span style="color: #000000;">[
        </span>'asPopover' => <span style="color: #0000ff;">false</span>,
        'inputType'=>\kartik\editable\Editable::INPUT_TEXTAREA,
        'options' =><span style="color: #000000;"> [
            </span>'rows' => 4,<span style="color: #000000;"> 
        ]</span>,<span style="color: #000000;">
    ]</span>,<span style="color: #000000;">
]</span>,

 

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

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

<span style="color: #0000ff;">require</span> kartik-v/yii2-widget-touchspin "@dev"

 

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

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

继续阅读