专栏首页恩蓝脚本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)输入我们需要修改的数据,如下图:

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框架入门与进阶教程》、《php优秀开发框架总结》、《php面向对象程序设计入门教程》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 详细分析Python可变对象和不可变对象

    在 Python 中一切都可以看作为对象。每个对象都有各自的 id, type 和 value。

    砸漏
  • python中id函数运行方式

    功能:返回的是对象的“身份证号”,唯一且不变,但在不重合的生命周期里,可能会出现相同的id值。此处所说的对象应该特指复合类型的对象(如类、list等),对于字符...

    砸漏
  • php菜单/评论数据递归分级算法的实现方法

    在开发过程中经常会遇到分级场景,如菜单分级、评论、商品类型分级等;在同一张mysql数据表中可能设计单表结构,如同如下数据:

    砸漏
  • 面试题|无索引如何删除亿级数据?

    存在索引的情况下就比较简单,直接利用索引进行删除,写一个for 循环语句 每次删除500行,每次判断delete 影响的行数可以累加计算删除了多少行,直到删除结...

    用户1278550
  • Cloudera 运营数据库提供事务支持

    我们很高兴与大家分享在向Cloudera的Operational Database添加ANSI SQL、二级索引、星型模式和视图功能之后,我们将在接下来的几个月...

    大数据杂货铺
  • WAF安全拦截绕过思路和手法

    注意:本文分享给安全从业人员,网站开发人员和运维人员在日常工作中使用和防范恶意攻击,请勿恶意使用下面描述技术进行非法操作。

    WeiyiGeek
  • 详细分析Python可变对象和不可变对象

    在 Python 中一切都可以看作为对象。每个对象都有各自的 id, type 和 value。

    砸漏
  • 【leetcode两题选手】MySQL类题目(八)

    某城市开了一家新的电影院,吸引了很多人过来看电影。该电影院特别注意用户体验,专门有个 LED显示板做电影推荐,上面公布着影评和相关电影描述。

    看、未来
  • springmvc实例之修改雇员相关信息(四)

    首先是在EmployeeHandler.java中编写toEditEmployeePage方法:

    绝命生
  • 「数据库」sql刷题(No.6)

    Hello 各位 ,我是公号「八点半技术站」的创作者 - Bruce.D (姓氏:豆)。

    八点半的Bruce、D

扫码关注云+社区

领取腾讯云代金券