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

 更新时间:2016年03月04日 08:48:47   投稿:lijiao  
这篇文章主要介绍了jquery ajax双击div直接修改div中内容的相关方法,感兴趣的小伙伴们可以参考一下

最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是网上找点资料自己动手写了一个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选择器总结

    常用jQuery选择器总结

    这篇文章主要介绍了常用jQuery选择器总结,总结的很简洁,很容易看明白和学会它,需要的朋友可以参考下
    2014-07-07
  • 用jquery实现输入框获取焦点消失文字

    用jquery实现输入框获取焦点消失文字

    文本框中经常会有提示你输入的信息,当你点击文本框,提示信息自动消失,下面也为大家介绍下输入框消失文字的方法,感兴趣的朋友可以参考下
    2013-04-04
  • jquery操作select常见方法大全【7种情况】

    jquery操作select常见方法大全【7种情况】

    这篇文章主要介绍了jquery操作select常见方法,结合实例形式总结分析了jQuery操作select常见的7种情况与相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • jQuery插件制作之全局函数用法实例

    jQuery插件制作之全局函数用法实例

    这篇文章主要介绍了jQuery插件制作之全局函数用法,实例分析了jQuery中全局函数的相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • 通过$(this)使用jQuery包装后的方法或属性

    通过$(this)使用jQuery包装后的方法或属性

    如果你要使用html元素本身的属性或方法就需要使用this,如果你要使用jQuery包装后的方法或属性就要$(this)
    2014-05-05
  • jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】

    jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】

    这篇文章主要介绍了jQuery 常用特效,结合实例形式总结分析了jquery显示与隐藏、淡入淡出、滑动、动画等常用特效实现技巧,需要的朋友可以参考下
    2020-05-05
  • JQuery中解决重复动画的方法

    JQuery中解决重复动画的方法

    本篇文章主要介绍了JQuery中解决重复动画的办法,有分别有图片滚动轮播,回到页面顶部,联级菜单滑出,手风琴等效果,有需要的朋友可以来看一下。
    2016-10-10
  • jQuery Easyui快速入门教程

    jQuery Easyui快速入门教程

    jQuery EasyUI是一组基于JQuery的UI插件集合,而JQueryEasyUI的目标就是帮助开发者更轻松的打造出功能丰富并且美观的UI界面,下面小编带领大家一起学习jquery easyui入门知识,一起看看吧
    2016-08-08
  • jQuery焦点图轮播效果实现方法

    jQuery焦点图轮播效果实现方法

    这篇文章主要介绍了jQuery焦点图轮播效果实现方法,结合实例形式简单分析了jQuery实现焦点图轮播效果的核心代码与相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • jquery ajax属性async(同步异步)示例

    jquery ajax属性async(同步异步)示例

    在jquery的ajax中如果我们希望实现同步或者异步我们可以直接设置async发生为真或假即可true false,下面举几个jquery ajax同步和异步实例
    2013-11-11

最新评论