其中一个解决方案在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