2012-07-21 3 views
2

때때로 자원을 재정렬해야하며 acts_as_list이이 작업에 유용합니다. 내 질문 : ActiveAdmin 프레임 워크에서 일부 리소스의 재정렬을 구현하는 가장 좋은 방법은 무엇입니까?ActiveAdmin에서 재정렬

나는 "최선의 방법"이 없다는 것을 알고 있지만, 사람들이 이런 종류의 질문에 모든 종류의 대답을 찾을 수 있도록 모든 대답을 환영한다고 생각합니다.


가 나는 가능한 솔루션 중 하나에게 자신을 서면으로 작성했습니다, 그리고 드래그 & 드롭 jQuery를 사용하고 있지만, 필터, 범위 작동하지 않습니다 및 정렬. 어쩌면 드래그 리디렉션을위한 별도의보기 & 드롭 정렬을 바꿀 이유가 있거나, 누군가가 체크 박스, 버튼 등으로 다른 UI를 수행했을 수도 있습니다.

공유하십시오!

답변

2

하나의 용액은 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_atmove_to_bottom 방법을 사용

.

또한 repaintTable을 추가 했으므로 홀수 행과 짝수 행이 스위치 이후에도 여전히 다른 색을 가지며 아약스 요청이 완료된 후에도이를 호출합니다.

function repaintTable() 
{ 
    $("#shows tr").removeClass('even odd'); 
    $("#shows tr").filter(":odd").addClass('odd'); 
    $("#shows tr").filter(":even").addClass('even'); 
} 

단점은 범위, 필터 및 일부 열 정렬에 문제가 있다는 것입니다.