jquery sortable 可以实现前端的jquery的排序,而不需要进行数据库的操作,http://jqueryui.com/sortable/ 也可以使用sortable中的serialize属性,将排序后的序号id通过ajax传给后台,进行数据库的存储
$.fn.mysorttable = function(opts) {
var _isSort = false;
var sortEle = $(this).find("tbody");
var _that = this;
var setting = $.extend({
begin:"beginOrder",
save:"saveOrder"
},opts||{});
sortEle.sortable({
axis:"y",
helper:function(e,ele) {
//原始元素的td对象
var _original = ele.children();
var _helper = ele.clone();
_helper.children().each(function(index){
$(this).width(_original.eq(index).width());
});
_helper.css("background","#aaf");
return _helper;
},
update:function(e,ui) {
setOrders();
}
});
sortEle.sortable("disable");
$("#"+setting.begin).click(beginOrders);
$("#"+setting.save).click(saveOrders);
function beginOrders() {
if(!_isSort) {
$(_that).find("thead tr").append("<td>序号</td>");
setOrders();
$(_that).find("tfoot tr").append("<td>拖动排序</td>");
sortEle.sortable("enable");
_isSort = true;
} else {
alert("已经处于排序状态");
}
}
function saveOrders() {
if(_isSort) {
var idArg = sortEle.sortable("serialize",{key:"ids"});
$.post("updateSort?"+idArg,function(data){
if($.ajaxCheck(data)) {
$(_that).find("tr").each(function(){
$(this).children().last().remove();
});
sortEle.sortable("disable");
_isSort = false;
}
});
} else {
alert("还不是排序状态");
}
}
function setOrders() {
$(_that).find("tbody tr").each(function(index){
if(_isSort) {
$(this).find("td:last").html((index+1));
} else
$(this).append("<td>"+(index+1)+"</td>");
});
}
return sortEle;
}