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

一，前端代码：
<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="点击向上移动"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="点击向下移动"onclick="edit_order(this,\''+id+'\',\''+url+'\')"attr-to="down"><spanclass="am-icon-arrow-down"></span></a>';
$(this).html(html);
});
前端是样式如图（具体样式自定）：

三.Jq提交后台并改变列表的顺序
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){//后台返回值
if(to=='down'&&val>0){
varpartentsDiv=that.parents('tr')//获取父级
varnext=partentsDiv.next();//获取父级下一个
if(next.html()!==undefined){
next.fadeOut('slow',function(){
$(this).after(partentsDiv);
}).fadeIn()
}else{//
layer.msg('到底了')//已经当前页最后一个，这里如果有分页可以通过刷新页面改变数据
}
}else{
varparentDiv=that.parents('tr');//获取父级
varprev=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 保存为排序号，通过对调二个排序号，来改变排序，

后台代码：
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);
}
}
查找出当向上或者向下的时候两条数据的排序号对调一下就行
我的排序是从大到小排，

本文题目：前端开发之jq+php点击上下按钮修改排序
浏览路径：https://www.cdcxhl.com/news27/246377.html

成都网站建设公司_创新互联，为您提供微信公众号、品牌网站建设、响应式网站、品牌网站制作、网站制作、App设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联