你的位置:首页 > Java教程

[Java教程]JQUERY、AJAX双击DIV,直接修改DIV内的内容


  最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是自己动手写……

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

  html代码:

<div title="【双击可直接修改】" 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);  }?>

 效果如下图:

图(1)

图(2)

 

本文转载自都市菜鸟