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+javascript液晶时钟
Oct 09 PHP
PHP新手上路(七)
Oct 09 PHP
PHP采集腾讯微博的实现代码
Jan 19 PHP
PHP中去掉字符串首尾空格的方法
May 19 PHP
html静态页面调用php文件的方法
Nov 13 PHP
ThinkPHP里用U方法调用js文件实例
Jun 18 PHP
详解php比较操作符的安全问题
Dec 03 PHP
24条货真价实的PHP代码优化技巧
Jul 28 PHP
Yii2单元测试用法示例
Nov 12 PHP
PHP获取指定日期是星期几的实现方法
Nov 30 PHP
详解PHP用substr函数截取字符串中的某部分
Dec 03 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
Nov 14 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检查日期函数checkdate用法实例
2015/03/19 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
javascript制作2048游戏
2015/03/30 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
python创建和使用字典实例详解
2013/11/01 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Python实现登陆文件验证方法
2018/10/06 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
通信专业个人自我鉴定
2013/10/21 职场文书
客房主管岗位职责
2013/12/09 职场文书
结婚喜宴主持词
2014/03/14 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python