首页 > Web开发 > 详细

JQUERY、AJAX双击DIV,直接修改DIV内的内容

时间:2016-03-03 22:54:55      阅读:340      评论:0      收藏:0      [点我收藏+]

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

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

 效果如下图:

技术分享

图(1)

技术分享

图(2)

 

本文转载自都市菜鸟

JQUERY、AJAX双击DIV,直接修改DIV内的内容

原文:http://www.cnblogs.com/vliegen/p/5240323.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!