一，前端代碼：
<tdclass="am-text-middleedit_up"attr_url="{:U('site_order')}"attr_id="{$item.category_id}">
二.通過jq 加載html
$(".edit_up").each(function(){
varid=$(this).attr('attr_id');//獲取提交的id
varurl=$(this).attr('attr_url');//獲取提交地址
varhtml='<aclass="am-btnam-btn-smam-btn-defaultam-radius"title="點(diǎn)擊向上移動(dòng)"onclick="edit_order(this,\''+id+'\',\''+url+'\')"attr-to="up"><spanclass="am-icon-arrow-up"></span></a><aclass="am-btnam-btn-smam-btn-defaultam-radius"title="點(diǎn)擊向下移動(dòng)"onclick="edit_order(this,\''+id+'\',\''+url+'\')"attr-to="down"><spanclass="am-icon-arrow-down"></span></a>';
$(this).html(html);
});
前端是樣式如圖（具體樣式自定）：

三.Jq提交后臺(tái)并改變列表的順序
functionedit_order(obj,t,id,url){
varto=$(obj).attr("attr-to");//獲取是向上還是向下
varurl=url+"?&i="+id+"&to="+to+"&ajaxedit=1";//提交地址；
varthat=$(obj)
$.ajax({
url:url,
cache:false,
success:function(val){
val=$.trim(val);
if(val>0){//后臺(tái)返回值
if(to=='down'&&val>0){
varpartentsDiv=that.parents('tr')//獲取父級(jí)
varnext=partentsDiv.next();//獲取父級(jí)下一個(gè)
if(next.html()!==undefined){
next.fadeOut('slow',function(){
$(this).after(partentsDiv);
}).fadeIn()
}else{//
layer.msg('到底了')//已經(jīng)當(dāng)前頁最后一個(gè)，這里如果有分頁可以通過刷新頁面改變數(shù)據(jù)
}
}else{
varparentDiv=that.parents('tr');//獲取父級(jí)
varprev=parentDiv.prev()//獲取父級(jí)上一個(gè)
if(prev.html()!==undefined){
prev.fadeOut('slow',function(){
$(this).before(parentDiv)
}).fadeIn()
}else{
layer.msg('到頂了')//已經(jīng)當(dāng)前頁第一個(gè)，這里如果有分頁可以通過刷新頁面改變數(shù)據(jù)
}
}
}else{
if(to=='down'){
layer.msg('到底了')//已經(jīng)是最后一個(gè)
}else{
layer.msg('到頂了')//已經(jīng)是第一個(gè)
}
}
}
});
}
點(diǎn)擊前：

點(diǎn)擊后，改變順序并且有個(gè)淡入淡出的效果

四、后臺(tái)改變數(shù)據(jù)的排序號(hào)，我的思路是保存的時(shí)候?qū)d 保存為排序號(hào)，通過對(duì)調(diào)二個(gè)排序號(hào)，來改變排序，

后臺(tái)代碼：
publicfunctionsite_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_iddesc')->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);
}
}
查找出當(dāng)向上或者向下的時(shí)候兩條數(shù)據(jù)的排序號(hào)對(duì)調(diào)一下就行
我的排序是從大到小排，

本文題目：前端開發(fā)之jq+php點(diǎn)擊上下按鈕修改排序
瀏覽路徑：http://jinyejixie.com/news27/246377.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、品牌網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站制作、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)