jQuery基于排序功能实现上移、下移的方法

本文实例讲述了jQuery基于排序功能实现上移、下移的方法。分享给大家供大家参考，具体如下：
效果

思路，
跟相邻元素，互换sort。
前提是每一个元素都有自己的sort值，不为零。

<tr id="{sh:$vo.id}"><td><span onclick="up（this）;" class="glyphicon glyphicon-arrow-up text-danger up" style="cursor: pointer;" title="上移" aria-hidden="true"></span>  <span onclick="down（this）;" class="glyphicon glyphicon-arrow-down text-danger down" style="cursor: pointer;" title="下移" aria-hidden="true"></span></td><td><span title="{sh:$vo.user_id}">{sh:$vo.store_name}</span></td><td class="center"><a href="{sh:$vo.logo}" target="_blank"><img src="{sh:$vo.logo}" width="30px;"></td><td class="center">{sh:$vo.category_name}</td><td class="center edit"><a val="{sh:$vo.store_id}" onclick="view（this）;" class="view btn btn-success" href="javascript:void（0）;" title="查看"><i class="halflings-icon white zoom-in"></i></a></td></tr>

点击，触发up方法，down方法。
获取当前id。
通过jQuery，获取相邻的元素。

// 上移function up（obj）{var $tr = $（obj）.parents（"tr"）;if （$tr.index（） ！= 0） {var current_id= $tr.attr（"id"）;var exchange_id= $tr.prev（"tr"）.attr（"id"）;$.ajax（{url: "{sh::U（"Mall/ajax","todo=exchange_sort"）}",type: "POST",data: "current_id="+current_id+"&exchange_id="+exchange_id,success:function（json） {if （json == 1） {$tr.fadeOut（）.fadeIn（）;$tr.prev（）.before（$tr）; layer.msg（"上移成功", {icon: 1}）;} else {layer.msg（"上移失败", {icon: 2}）;}}}）;}}// 下移function down（obj） {var len = $（".down"）.length;var $tr = $（obj）.parents（"tr"）;if （$tr.index（） ！= len - 1） { var current_id= $tr.attr（"id"）;var exchange_id= $tr.next（"tr"）.attr（"id"）;$.ajax（{url: "{sh::U（"Mall/ajax","todo=exchange_sort"）}",type: "POST",data: "current_id="+current_id+"&exchange_id="+exchange_id,success:function（json） {if （json == 1） {$tr.fadeOut（）.fadeIn（）;$tr.next（）.after（$tr）; layer.msg（"下移成功", {icon: 1}）;} else {layer.msg（"下移失败", {icon: 2}）;}}}）;} }

这里用到了几个jQuery方法，prev（）,next（）,before（）,after（）。以及效果，fadeOut（）,fadeIn（）。以及一些简单的逻辑判断和技巧。
php后台处理，

case "exchange_sort":$mallShopModel = M（"Mall_shop"）;$current_id= $this->_post（"current_id","trim"）;$exchange_id= $this->_post（"exchange_id","trim"）;$current_sort = $mallShopModel->where（array（"id"=>$exchange_id））->getField（"sort"）;$exchange_sort = $mallShopModel->where（array（"id"=>$current_id））->getField（"sort"）;$cdata["id"]= $current_id;$cdata["sort"] = $current_sort;$cres = $mallShopModel->save（$cdata）;$edata["id"]= $exchange_id;$edata["sort"]= $exchange_sort;$eres = $mallShopModel->save（$edata）;if （$cres ！== FALSE && $eres ！== FALSE）{exit（"1"）;} else {exit（"2"）;}

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery排序技巧总结》、《jQuery操作DOM节点方法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格（table）操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。