jquery ajax雙擊div可直接修改div中的內(nèi)容

字號:


    最近在做后臺功能開發(fā)的時候,用到對排序字段的修改,感覺只為了修改一個排序值,而要重新進(jìn)入編輯頁比較麻煩,于是網(wǎng)上找點(diǎn)資料自己動手寫了一個jquery雙擊實(shí)現(xiàn)直接修改排序值的效果:
    html代碼:
    <div 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(){
       // 失去焦點(diǎn),保存值。于服務(wù)器交互自己再寫,最好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 設(shè)置排序值
      */
     public function setSort(){
      if(IS_POST){
       $tid = I('post.tid');
       $sort = I('post.sort');
       if(!is_numeric($sort)){
        $arr = array(
         'flag'=>3,
         'msg'=>'請輸入數(shù)字',
         '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'=>'排序值設(shè)置成功',
         'link'=>'',
         'content'=>''
        );
       }else{
        $arr = array(
         'flag'=>2,
         'msg'=>'排序值設(shè)置失敗',
         'link'=>'',
         'content'=>''
        );
       }
      }else{
       $arr = array(
        'flag'=>0,
        'msg'=>'請求非法!',
        'link'=>'',
        'content'=>''
       );
      }
      $this->ajaxReturn($arr);
     }
    ?>
    以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。