前端开发之jq+php点击上下按钮修改排序

一，前端代码：

<td class=”am-text-middle edit_up”  attr_url=”{:U(‘site_order’)}”  attr_id=”{$item.category_id}”>

二.通过jq 加载html

    $(“.edit_up”).each(function() {

     var id = $(this).attr(‘attr_id’);//获取提交的id

     var url=$(this).attr(‘attr_url’);//获取提交地址

     var html = ‘<a class=”am-btn  am-btn-sm am-btn-default  am-radius” title=”点击向上移动” onclick=”edit_order(this,\” + id + ‘\’,\” + url + ‘\’)” attr-to=”up”> <span class=”am-icon-arrow-up”></span> </a><a class=”am-btn  am-btn-sm am-btn-default  am-radius” title=”点击向下移动” onclick=”edit_order(this,\” + id + ‘\’,\” + url + ‘\’)” attr-to=”down”> <span class=”am-icon-arrow-down”></span> </a>’;

        $(this).html(html);

});

 

前端是样式如图（具体样式自定）：

 

 

三.Jq提交后台并改变列表的顺序

function edit_order(obj, t, id,url) {

    var to = $(obj).attr(“attr-to”);//获取是向上还是向下

    var url = url + “?&i=” + id  +”&to=” + to + “&ajaxedit=1”;//提交地址；

    var that=$(obj)

    $.ajax({

        url: url,

        cache: false,

        success: function(val) {

            val = $.trim(val);

            if(val>0){//后台返回值

            if (to == ‘down’ && val>0) {

                var partentsDiv =that.parents(‘tr’)//获取父级

 

                var next = partentsDiv.next();//获取父级下一个

 

                if(next.html() !== undefined){

                 next.fadeOut(‘slow’,function(){

                $(this).after(partentsDiv);

                }).fadeIn()

               }else{//

                  layer.msg(‘到底了’)//已经当前页最后一个，这里如果有分页可以通过刷新页面改变数据

                 } 

            }else{

            var parentDiv = that.parents(‘tr’);//获取父级

             var prev = parentDiv.prev()//获取父级上一个

             if(prev.html() !== undefined){

                prev.fadeOut(‘slow’,function () {

                     $(this).before(parentDiv)

                 }).fadeIn()

             }else{

 

                layer.msg(‘到顶了’) //已经当前页第一个，这里如果有分页可以通过刷新页面改变数据

 

             }

            }

        }else{

            if(to == ‘down’){

                layer.msg(‘到底了’) //已经是最后一个

            }else{

                layer.msg(‘到顶了’) //已经是第一个

 

            }

          

        }

        }

    });

}

 

点击前：

 

点击后，改变顺序并且有个淡入淡出的效果

 

 

 

四、后台改变数据的排序号，我的思路是保存的时候将id 保存为排序号，通过对调二个排序号，来改变排序，

 

 

后台代码：

 

 public  function site_order(){

        $id=I(‘i’);

        $to=I(‘to’);

        $ModelObj = $this->ModelObj;

        $old=$ModelObj->field(‘order_id,parent_id’)->where(array(‘category_id’=>$id))->find();

        if($to==’down’){

           $new=$ModelObj->where(array(‘status’=>1,’parent_id’=>$old[‘parent_id’],’order_id’=>array(‘lt’,$old[‘order_id’])))->order(‘order_id desc’)->find();

        }

        if($to==’up’){

            $new=$ModelObj->field(‘order_id,category_id’)->where(array(‘status’=>1,’parent_id’=>$old[‘parent_id’],’order_id’=>array(‘gt’,$old[‘order_id’])))->order(‘order_id’)->find();

        }

        if($new){

            $ModelObj->where(array(‘category_id’=>$new[‘category_id’]))->setField(‘order_id’,$old[‘order_id’]);

            $res=$ModelObj->where(array(‘category_id’=>$id))->setField(‘order_id’,$new[‘order_id’]);

        }

        $this->ajaxReturn($res);

}           

     }

 

查找出当向上或者向下的时候两条数据的排序号对调一下就行

我的排序是从大到小排，

所有向下的时候，找出小于这个排序号数据中最大的那个，

反之找到找出大于这个排序号数据中最小的那个。