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 相关文章推荐
Smarty结合Ajax实现无刷新留言本实例
Jan 02 PHP
php 图片上传类代码
Jul 17 PHP
php中模拟POST传递数据的两种方法分享
Sep 16 PHP
PHP中extract()函数的定义和用法
Aug 17 PHP
php 无法加载mcrypt.dll的解决办法
Apr 03 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
Jun 05 PHP
php 判断网页是否是utf8编码的方法
Jun 06 PHP
PHP之正则表达式捕获组与非捕获组(详解)
Jul 29 PHP
php加密之discuz内容经典加密方式实例详解
Feb 04 PHP
Laravel实现表单提交
May 07 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
Jul 26 PHP
php二维数组按某个键值排序的实例讲解
Feb 15 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
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
python正则表达式re模块详解
2014/06/25 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
python正则表达式之作业计算器
2016/03/18 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
浅析Python 条件控制语句
2020/07/15 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
Python jieba库分词模式实例用法
2021/01/13 Python
extern是什么意思
2016/03/10 面试题
安全检查与奖惩制度
2014/01/23 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
应聘教师求职信
2014/07/19 职场文书
防灾减灾活动总结
2014/08/30 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫