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


Posted in PHP onMay 16, 2016

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

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我们刚刚安装的gridview
use 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类型的修改,图如下

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

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

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

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

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

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

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

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

Yii2 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

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

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

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

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

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

左右两边是两个属性,为了做对比说明,左侧是不可修改的属性展示,代码如下

[
'attribute' => 'is_delete',
'class'=>'kartik\grid\EditableColumn',
'editableOptions'=>[
'inputType'=>\kartik\editable\Editable::INPUT_DROPDOWN_LIST,
'asPopover' => false,
'data' => Article::itemAlias('is_delete'),
],
'value' => function ($model) {
return Article::itemAlias('is_delete', $model->is_delete);
},
'filter' => Article::itemAlias('is_delete'),
],

第四个,我们讲解下日期组件和时间组件,先截图看效果,然后在安装

//日期组件
composer require kartik-v/yii2-widget-datepicker "@dev"
//时间组件
composer require kartik-v/yii2-widget-datetimepicker "*"
//日期组件
[
'attribute' => 'created_at',
//这个设定表格的宽度
// 'headerOptions' => ['width' => '150px'],
'class'=>'kartik\grid\EditableColumn',
'editableOptions'=>[
'inputType'=>\kartik\editable\Editable::INPUT_DATE,
'asPopover' => false,
//这个设定我们组件的宽度
'contentOptions' => ['style'=>'width:180px'],
'options' => [
'pluginOptions' => [
//设定我们日期组件的格式
'format' => 'yyyy-mm-dd',
]
],
],
'format' => ['date', 'Y-m-d'],
],
//时间组件
[
'attribute' => 'updated_at',
// 'headerOptions' => ['width' => '150px'],
'class'=>'kartik\grid\EditableColumn',
'editableOptions'=>[
'inputType'=>\kartik\editable\Editable::INPUT_DATETIME,
'asPopover' => false,
'contentOptions' => ['style'=>'width:250px'],
],
],

基本上就这4中类型吧,view配置好了,我们就需要配置controller层进行异步操作了,我们来看看是怎么操作的。

声明:如果你的gridview是在视图article/index内,那么接下来的操作你需要在article控制器的index内操作。

use yii\helpers\Json;
public function actionIndex()
{
$searchModel = new ArticleSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
if (Yii::$app->request->post('hasEditable')) {
$id = Yii::$app->request->post('editableKey');
$model = Article::findOne(['id' => $id]);
$out = Json::encode(['output'=>'', 'message'=>'']);
$posted = current($_POST['Article']);
$post = ['Article' => $posted];
if ($model->load($post)) {
$model->save();
$output = '';
isset($posted['title']) && $output = $model->title;
// 其他的这里就忽略了,大致可参考这个title
}
$out = Json::encode(['output'=>$output, 'message'=>'']);
echo $out;
return;
}
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
}

关于小编给大家介绍的Yii2 GridView实现列表页直接修改数据的方法就给大家介绍到这里,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木网站。

PHP 相关文章推荐
PHP 多维数组排序实现代码
Aug 05 PHP
php 使用post,get的一种简洁方式
Apr 25 PHP
修改php.ini以达到屏蔽错误信息并记录日志
Jun 16 PHP
FireFox浏览器使用Javascript上传大文件
Oct 30 PHP
PHP获取数组最后一个值的2种方法
Jan 21 PHP
全面解读PHP的人气开发框架Laravel
Oct 15 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
Dec 18 PHP
php微信公众号开发(3)php实现简单微信文本通讯
Dec 15 PHP
php获取给定日期相差天数的方法分析
Feb 20 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
Apr 04 PHP
Laravel 的数据库迁移的方法
Jul 31 PHP
PHP设计模式之观察者模式定义与用法分析
Apr 04 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
May 16 #PHP
php metaphone()函数的定义和用法
May 15 #PHP
php图片上传类 附调用方法
May 15 #PHP
php简单的上传类分享
May 15 #PHP
分享php多功能图片处理类
May 15 #PHP
非常经典的PHP文件上传类分享
May 15 #PHP
php metaphone()函数及php localeconv() 函数实例解析
May 15 #PHP
You might like
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
深入PHP变量存储的详解
2013/06/13 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
Python作用域用法实例详解
2016/03/15 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
如何开启linux的ssh服务
2015/02/14 面试题
历史学专业个人的自我评价
2013/10/13 职场文书
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
魅力教师事迹材料
2014/01/10 职场文书
政治思想表现评语
2014/05/04 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
Elasticsearch 基本查询和组合查询
2022/04/19 Python