jquery ajax双击div可直接修改div中的内容


Posted in Javascript onMarch 04, 2016

最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是网上找点资料自己动手写了一个jquery双击实现直接修改排序值的效果:

html代码:

<div title="【双击可直接修改】" class="changeSort" id="{$id}">{$sort}</div>

JS代码:

<script type="text/javascript">
//双击修改排序
 $('.changeSort').dblclick(function(){
  var url = "{:U('setSort')}";
  var td = $(this);
  var id = td.attr('id');
  var text = td.text();
  var txt = $("<input type='text' class='input-small' >").val(text);
  txt.blur(function(){
   // 失去焦点,保存值。于服务器交互自己再写,最好ajax
   var newText = $(this).val();
   $.ajax({
     url:url,
     type:'POST',
     data:{'tid':id,'sort':newText},
     dataType:'json',
     success:function(res){
      if(res.flag==1){
      layer.msg(res.msg);
      // 移除文本框,显示新值
      $(this).remove();
      td.text(newText);
      }else if(res.flag==3){
       layer.msg(res.msg);
       txt.val(newText);
      }
     }
    });
    
  });
  td.text("");
  td.append(txt);
 });
</script>

PHP代码:

<?PHP
/**
  * ajax 设置排序值
  */
 public function setSort(){
  if(IS_POST){
   $tid = I('post.tid');
   $sort = I('post.sort');
   if(!is_numeric($sort)){
    $arr = array(
     'flag'=>3,
     'msg'=>'请输入数字',
     'link'=>'',
     'content'=>''
    );
    $this->ajaxReturn($arr);
   }
   $data = array(
    'id'=>$tid,
    'sort'=>$sort
   );
   $this->mod_sort = M('Sort');
   $res = $this->mod_sort->save($data);
   if($res){
    $arr = array(
     'flag'=>1,
     'msg'=>'排序值设置成功',
     'link'=>'',
     'content'=>''
    );
   }else{
    $arr = array(
     'flag'=>2,
     'msg'=>'排序值设置失败',
     'link'=>'',
     'content'=>''
    );
   }
  }else{
   $arr = array(
    'flag'=>0,
    'msg'=>'请求非法!',
    'link'=>'',
    'content'=>''
   );
  }
  $this->ajaxReturn($arr);
 }
?>

效果如下图:

jquery ajax双击div可直接修改div中的内容

jquery ajax双击div可直接修改div中的内容

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
jquery 问答知识整理
Feb 11 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
r.js来合并压缩css文件的示例
Apr 26 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
js实现文字滚动效果
Mar 03 #Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 #Javascript
JQuery日期插件datepicker的使用方法
Mar 03 #Javascript
jQuery日历插件datepicker用法详解
Mar 03 #Javascript
初步使用Node连接Mysql数据库
Mar 03 #Javascript
初步使用bootstrap快速创建页面
Mar 03 #Javascript
JS动态增删表格行的方法
Mar 03 #Javascript
You might like
PHP 字符串分割和比较
2009/10/06 PHP
PHP实现的简单缓存类
2015/07/29 PHP
javascript页面加载完执行事件代码
2014/02/11 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
详解Python中的测试工具
2019/06/09 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
篮球赛口号
2014/06/18 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
给老婆的检讨书
2015/01/27 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
详解Python类和对象内容
2021/06/22 Python
MySQL分区以及建索引的方法总结
2022/04/13 MySQL
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby