• customer service QQ:    WeChat: Contact number: 18613993467     

Front-end development jq+php Click the up and down button to modify the sorting

Suyou Network (10 years of experience), serves tens of thousands of companies, and has fixed transparent quotations.Domain name registration, hosting /One-stop service for server and website source code.A physical company, a professional team, worth choosing!Website building business: corporate website construction, company official website production, foreign trade website construction, website imitation, website copying, imitation site, foreign trade website construction, single-page customer service WeChat【 suyoufuwu】


1. Front-end code:

2. By jq load html
    $(".edit_up").each(function() {
     var id = $(this).attr('attr_id');//Get the submitted id
     var url=$(this).attr('attr_url');//Get the submission address
     var html = '    ';
        $(this).html(html);
});
 
The front end has the style as shown in the figure (specific style is customized):
 

Front-end development

 
three. Jq Submit the background and change the order of the list
function edit_order(obj, t, id,url) {
    var to = $(obj).attr("attr-to");//Get up or down
    var url = url + "?&i=" + id  +"&to=" + to + "&ajaxedit=1";//Submit address;
    var that=$(obj)
    $.ajax({
        url: url,
        cache: false,
        success: function(val) {
            val = $.trim(val);
            if(val>0){//Backend value
            if (to == 'down' && val>0) {
                var partentsDiv =that.parents('tr')//Get the parent
 
                var next = partentsDiv.next();//Get the next parent
 
                if(next.html() !== undefined){
                 next.fadeOut('slow',function(){
                $(this).after(partentsDiv);
                }).fadeIn()
               }else{//
                  layer.msg('It's the end' )//The last one on the current page, if there is a paging, you can change the data by refreshing the page
                 } 
            }else{
            var parentDiv = that.parents('tr');//Get the parent
             var prev = parentDiv.prev()//Get the previous parent
             if(prev.html() !== undefined){
                prev.fadeOut('slow',function () {
                     $(this).before(parentDiv)
                 }).fadeIn()
             }else{
 
                layer.msg('It's up to the top' ) //It is already the first page. If there is a paging, you can change the data by refreshing the page.
 
             }
            }
        }else{
            if(to == 'down'){
                layer.msg('It's the end' ) //Already the last
            }else{
                layer.msg('It's up to the top' ) //Already the first
 
            }
          
        }
        }
    });
}
 
Before clicking:
 

Front-end development

After clicking, change the order and have a fade effect
 

Front-end development


 
 
4. Change the sort number of data in the background. My idea is to save it. id Save as sorting number, change the sorting by changing the two sorting numbers.
 

Front-end development


 
Background code:
 
 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);
}           
     }
 
Just find out the sort numbers of the two data when up or down
My sorting is from large to small
When all downwards, find the largest number of data smaller than this sort number.
On the contrary, find the smallest one in the sort number data.

The above is the "front-end development shared by Suyou Network with everyone jq+php Click the up and down button to modify the sorting. Thank you very much for your patience to read this article. We will provide you with more information on reference, use or learning and communication.We can also provide you with:Enterprise website construction, website imitation, website copying, imitation site, foreign trade website construction, foreign trade website construction, company official website productionFor services, our company serves customers with the service concept of "integrity, professionalism, pragmatism and innovation".If you need cooperation, please scan the code to consult, and we will serve you sincerely.

TAG Label:

National branch station

National branch station