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 date函数参数详解
Nov 27 PHP
php实现保存submit内容之后禁止刷新
Mar 19 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
Jun 12 PHP
PHP中使用curl伪造IP的简单方法
Aug 07 PHP
PHP实现数据分页显示的简单实例
May 26 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
Nov 04 PHP
php实现背景图上添加圆形logo图标的方法
Nov 17 PHP
php微信开发之谷歌测距
Jun 14 PHP
stripos函数知识点实例分享
Feb 11 PHP
PHP示例演示发送邮件给某个邮箱
Apr 03 PHP
浅析PHP7的多进程及实例源码
Apr 14 PHP
PHP ElasticSearch做搜索实例讲解
Feb 05 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页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
用Python逐行分析文件方法
2019/01/28 Python
python反编译学习之字节码详解
2019/05/19 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
英语教学随笔感言
2014/02/20 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
代理协议书
2014/04/22 职场文书
班级年度安全计划书
2014/05/01 职场文书
合作协议书范文
2014/08/20 职场文书
普宁寺导游词
2015/02/04 职场文书
排球赛新闻稿
2015/07/17 职场文书
小学四年级作文之写景
2019/08/23 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
Go语言特点及基本数据类型使用详解
2022/03/21 Golang