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 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
JS实现京东商品分类侧边栏
Dec 11 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仿盗链代码
2012/06/03 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
PHP 文件上传限制问题
2019/09/01 PHP
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
python基础教程之对象和类的实际运用
2014/08/29 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
python使用tornado实现简单爬虫
2018/07/28 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
解析Python3中的Import
2019/10/13 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
Python实现搜索算法的实例代码
2020/01/02 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
python 实现两个npy档案合并
2020/07/01 Python
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
销售工作岗位职责
2013/12/24 职场文书
机关出纳岗位职责
2014/04/03 职场文书
文案策划专业自荐信
2014/07/07 职场文书
群众路线领导对照材料
2014/08/23 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
如何撰写创业策划书
2019/06/27 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python