其中一個解決方案在Sortable lists with acts_as_list and ActiveAdmin中描述。該解決方案非常好,我可以從我自己添加的是有點不同的序列化功能和一些更多的化妝品的東西:
首先,我認爲這將是更有效的移動所需的資源進入指定的位置,而不是移動之後的所有位置。這裏是我的更新update
功能:
$("#shows tbody").sortable({
update: function(event, ui){
var request
if (ui.item.next().length == 0)
request = {method: 'move_to_bottom', target: ui.item.find("span.show").data("id")}
else
request = {method: 'put_at_index', data: ui.item.next().find("span.show").data("id"), target: ui.item.find("span.show").data("id")}
$.ajax({
url: "/admin/shows/sort",
type: 'post',
headers: {
'X-Transaction': 'sort shows',
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
data: request,
complete: function(){
$(".paginated_collection").effect("highlight");
repaintTable();
}
});
}
});
正如你所看到的,我要麼送put_at_index
法放什麼和什麼項目的索引數據(這實際上是低於我們已經拖了一個項目),如果它被拖到列表的底部,並且它下面沒有任何東西(在它之後),那麼我只需發送一個move_to_bottom
方法,並將數據移到底部。
的sort
行動也改變了,現在是這樣工作的:
collection_action :sort, :method => :post do
case params[:method]
when 'move_to_bottom'
Show.find(params[:target]).move_to_bottom
when 'put_at_index'
Show.find(params[:target]).insert_at(Show.find(params[:data]).position)
end
head 200
end
所以它只是使用acts_as_list的insert_at
和move_to_bottom
方法。
另外我添加了一個repaintTable
,所以奇數行和偶數行在開關後仍然有不同的顏色,我在ajax請求完成後調用它。
function repaintTable()
{
$("#shows tr").removeClass('even odd');
$("#shows tr").filter(":odd").addClass('odd');
$("#shows tr").filter(":even").addClass('even');
}
缺點是,它對作用域,過濾器和某些列進行排序時效果不佳。
來源
2012-07-21 16:48:26
Uko