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

速优网络（10年经验），服务数万家企业，固定透明报价。域名注册、主机/服务器、网站源码一站式服务。实体公司，专业团队，值得选择！建站业务：企业网站建设、公司官网制作、外贸网站建设、网站仿制、网站复制、仿站、外贸建站、单页扒站客服微信【suyoufuwu】

一，前端代码：

二.通过jq 加载html
    $(".edit_up").each(function() {
     var id = $(this).attr('attr_id');//获取提交的id
     var url=$(this).attr('attr_url');//获取提交地址
     var html = '

';
$(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);
}
     }

查找出当向上或者向下的时候两条数据的排序号对调一下就行
我的排序是从大到小排，
所有向下的时候，找出小于这个排序号数据中最大的那个，
反之找到找出大于这个排序号数据中最小的那个。

以上就是速优网络和大家分享的"前端开发之jq+php点击上下按钮修改排序",非常感谢您有耐心的读完这篇文章，我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供：企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务，本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作，请扫码咨询，我们将诚挚为您服务。

TAG标签：

上一篇：如何为企业网站设计公仔？

下一篇：老生常谈：企业网站包括哪些部分？