JQUERYAJAX双击DIV,直接修改DIV内的内容

Posted 2020-06-18 VeryMule

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

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

 

本文转载自都市菜鸟