하나의 용액은 Sortable lists with acts_as_list and ActiveAdmin에 기술되어있다. 이 솔루션은 매우 훌륭하며, 내가 직접 추가 할 수있는 것은 약간 다른 직렬화 함수와 좀 더 외형적인 것입니다.
우선, 원하는 자원을 이동하는 것이 더 효율적이라고 생각했습니다. 그 뒤에있는 모든 것을 이동하는 대신 지정된 위치로 이동하십시오. 당신이 볼 수 있듯이
$("#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
방법을 보낼 경우 : 여기 내 업데이트 update
기능입니다 그것은 목록의 맨 아래로 끌려 갔고 그 아래에 아무것도 없었습니다. 그리고 난 그냥 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
을 추가 했으므로 홀수 행과 짝수 행이 스위치 이후에도 여전히 다른 색을 가지며 아약스 요청이 완료된 후에도이를 호출합니다.
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