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

 }

?>

以上就是本文的全部内容，希望对大家的学习有所帮助。