Laravel框架实现即点即改功能的方法分析


Posted in PHP onOctober 31, 2019

本文实例讲述了Laravel框架实现即点即改功能的方法。分享给大家供大家参考,具体如下:

有的时候我们不需要更改大量数据,只需要更改一个字段的时候,我们就用到了即点即改,以用户模块,修改用户名称为例,下图为我的展示模块
Laravel框架实现即点即改功能的方法分析
Laravel框架实现即点即改功能的方法分析
当我们点击用户名时,会出现一个修改框,那么这个修改框是怎么来的呢?
我们点击时,隐藏在这个td当中的修改框会出现,而展示时的用户名会隐藏起来,我们怎么利用代码实现?

<td onclick="saveuser({{$v->id}})">
    <span id="bbb{{$v->id}}">{{$v->username}}</span>
    <input type="text" value="{{$v->username}}" style="display:none" id="aaa{{$v->id}}"
     onblur="edituser({{$v->id}})">
  </td>

从上述代码中我们可以看到一个存放用户名的span标签,还有一个默认为隐藏的input框,用来存放用户名,接下来我们要做的就是:通过相应的点击事件,实现即点即改;在修改数据时,我们尽量要根据他的唯一字段id进行修改,避免出错:

首先,我在页面显示span标签当中起了一个id,名为 “bbb”+用户的id,在隐藏的input中id为 “aaa”+用户的id,在相应点击事件中存放id,方便ajax取用户的id值;

接下来就是通过ajax技术,传递相应id值,以及要修改的数据到控制器,进行相应的修改:

1)首先引入jquery文件

<script src="{{asset('Follow')}}/js/jquery.min.js"></script>

2)点击事件:当我们点击时,span标签内容设置为空值,input标签出现

function saveuser(id){
	    document.getElementById('aaa'+id).style.display='block';//显示input
	    document.getElementById('bbb'+id).innerHTML="";//span标签的值设置为空
  }

3)输入我们需要修改的数据,如下图:
Laravel框架实现即点即改功能的方法分析

4)要修改的数据写完之后,就到了最关键的时候,怎样进行修改?

通过上面,可以看到input有一个失去焦点事件,因此我在这个事件里进行ajax请求

function edituser(id){
   var username = document.getElementById('aaa'+id).value;//获取文本框的值
  $.ajax({
    type:'GET',//请求方式
    data:{'id':id,'username':username},//传递参数
    url:"{{url('edituser')}}",//地址
    success:function(e){//回调
      if(e==1){
        document.getElementById('aaa'+id).style.display = 'none';//如果修改成功,input隐藏
        document.getElementById('bbb'+id).innerHTML = username;//修改成功,将表里修改后的数据赋值给span标签
      }else{
        alert('修改失败');
        window.location.reload();
      }
    }
   
  })
 }

5)通过ajax传递的参数,进行数据查询和修改:
首先我们在控制器接收:

public function edituser(){

	  $arr = Input::get();//接收ajax传递的参数

	  $result = BlueShop::useredit($arr);//调用模型,并将接收到的 id 和要修改的数据赋给模型

	  if($result){
	    $status = 1;
    }else{
	    $status = 2;
    }
    return $status;//将结果返回给展示页面
  }

然后我们在模型进行我们的逻辑代码部分

//$arr数组 $arr['id'] 用户id $arr['username']要修改的用户名
public static function useredit($arr){

    $res = DB::table('jy_user')->where('id',$arr['id'])->update($arr);//通过id修改

    return $res;//返回结果
  }

6)此时我们可以看到,页面已经修改
Laravel框架实现即点即改功能的方法分析
而数据表中的数据也进行了更新
Laravel框架实现即点即改功能的方法分析

这就是一个简单的即点即改,希望对大家能有所帮助!!!

希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。

PHP 相关文章推荐
文件上传的实现
Oct 09 PHP
php判断字符以及字符串的包含方法属性
Aug 30 PHP
PHP 作用域解析运算符(::)
Jul 27 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
Dec 11 PHP
php小经验:解析preg_match与preg_match_all 函数
Jun 29 PHP
使用ThinkPHP+Uploadify实现图片上传功能
Jun 26 PHP
php实现购物车功能(下)
Jan 05 PHP
phpmyadmin下载、安装、配置教程
May 16 PHP
[原创]php token使用与验证示例【测试可用】
Aug 30 PHP
php实现支付宝当面付(扫码支付)功能
May 30 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
May 05 PHP
laravel批量生成假数据的方法
Oct 09 PHP
laravel 框架实现无限级分类的方法示例
Oct 31 #PHP
tp5框架的增删改查操作示例
Oct 31 #PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
Oct 30 #PHP
thinkPHP框架乐观锁和悲观锁实例分析
Oct 30 #PHP
PHP的HTTP客户端Guzzle简单使用方法分析
Oct 30 #PHP
ThinkPHP5.0框架实现切换数据库的方法分析
Oct 30 #PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
Oct 30 #PHP
You might like
PHP验证码函数代码(简单实用)
2013/09/29 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
JS随机密码生成算法
2019/09/23 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
详解Python3 pickle模块用法
2019/09/16 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
台湾家适得:Homeget
2019/02/11 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
三年级数学教学反思
2014/01/31 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
2015年仓库工作总结
2015/04/09 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android