最近在做后臺(tái)功能開發(fā)的時(shí)候，用到對(duì)排序字段的修改，感覺只為了修改一個(gè)排序值，而要重新進(jìn)入編輯頁比較麻煩，于是網(wǎng)上找點(diǎn)資料自己動(dòng)手寫了一個(gè)jquery雙擊實(shí)現(xiàn)直接修改排序值的效果：

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(){

   // 失去焦點(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'=>'請(qǐng)輸入數(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'=>'請(qǐng)求非法！',

    'link'=>'',

    'content'=>''

   );

  }

  $this->ajaxReturn($arr);

 }

?>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。