Heim > php教程 > php手册 > 谈谈yii2-GridView如何实现列表页直接修改数据,谈谈yii2-gridview

谈谈yii2-GridView如何实现列表页直接修改数据,谈谈yii2-gridview

WBOY
Freigeben: 2016-06-13 08:39:59
Original
990 Leute haben es durchsucht

谈谈yii2-GridView如何实现列表页直接修改数据,谈谈yii2-gridview

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

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

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

composer <span>require</span> kartik-v/yii2-grid "@dev"
Nach dem Login kopieren

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

'modules' =><span> [
   </span>'gridview' =><span>  [
        </span>'class' => '\kartik\grid\Module'<span>
    ]
];</span>
Nach dem Login kopieren

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

<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>
        ],
?>
Nach dem Login kopieren

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

然后我们安装yii2-editable

composer <span>require</span> kartik-v/yii2-editable "@dev"
Nach dem Login kopieren

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

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

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

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

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

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

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

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

<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>,
Nach dem Login kopieren

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

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

<span>require</span> kartik-v/yii2-widget-touchspin "@dev"
Nach dem Login kopieren

 

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

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

继续阅读

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage