Jaki jest najprostszy sposób, aby umożliwić użytkownikowi przeciąganie i upuszczanie wierszy tabeli w celu zmiany ich kolejności?

Question

Mam aplikację Ruby on Rails, którą piszę, gdy użytkownik ma opcję edycji faktury. Muszą być w stanie zmienić kolejność rzędów. W tej chwili mam kolumna indeksu w db, który jest używany jako domyślny mechanizm sortowania. Po prostu to ujawniłem i zezwoliłem użytkownikowi na jego edycję.

To nie jest zbyt eleganckie. Chciałbym, aby użytkownik mógł przeciągać i upuszczać wiersze tabeli. Użyłem trochę Scriptaculous i Prototype i jestem ich obeznany. Zrobiłem listy przeciągnij i upuść, ale nie robiłem wierszy tabeli w ten sposób. Czy ktoś ma jakieś sugestie dotyczące nie tylko ponownego zamawiania, ale także skutecznego przechwytywania reorganizacji?

Użytkownik może teraz dynamicznie tworzyć nowy wiersz w JS, więc wiersz musi być również możliwy do zmiany.

Punkty premiowe, jeśli można to zrobić za pomocą RJS zamiast bezpośredniego JavaScript.

Answer 1

Użyłem biblioteki interfejsu użytkownika Yahoo to zrobić przed:

http://developer.yahoo.com/yui/dragdrop/

Answer 2

Scriptaculous sortables wydaje się droga, ponieważ zbudowany w http://github.com/madrobby/scriptaculous/wikis/sortable

Answer 3

Interfejs Yahoo było. łatwiej, niż się spodziewałem, gdyby coś nie działało w mniej niż cztery godziny.

Answer 4

MooTools sortownie są w rzeczywistości lepsze niż script.aculo.us, ponieważ są dynamiczne; MooTools umożliwia dodawanie/usuwanie pozycji do listy. Kiedy nowy item zostanie dodany do script.aculo.us do sortowania, musisz zniszczyć/odtworzyć sortable, aby nowy item mógł być sortowalny. Będzie dużo na głowie, jeśli lista zawiera wiele elementów. Musiałem przełączyć się z script.aculo.us na bardziej lekki MooTools właśnie z powodu tego ograniczenia i w rezultacie byłem bardzo zadowolony z tej decyzji.

MooTools sposób dokonywania nowo dodany element sortable tylko:

sortables.addItems(node); 

Answer 5

Ok, zrobiłem trochę więcej szorowania i zorientowali się, że coś wydaje się przeważnie działa.

edit.html.erb:

... 
<table id="invoices"> 
    <thead> 
    <tr> 
     <th>Id</th> 
     <th>Description</th> 
    </tr> 
    </thead> 
    <tbody id="line_items"> 
     <%= render :partial => 'invoice_line_item', :collection => @invoice.invoice_line_items.sort %> 
    </tbody> 
</table> 

<%= sortable_element('line_items', {:url => {:action => :update_index}, :tag => :tr, :constraint => :vertical}) -%> 
... 

APP/regulatory/invoices.rb

... 
def update_index 
    params["line_items"].each_with_index do |id, index| 
    InvoiceLineItem.update(id, :index => index) 
    end 
    render :nothing => true 
end 
... 

Ważną częścią jest: tag =>: TR "sortable_element" i params [ "line_items "] - to daje nową listę identyfikatorów i jest wyzwalane po kropli.

Uszkodzenia: Powoduje zawieszanie wywołania AJAX, myślę, że wolałbym zachować zamówienie i zaktualizować, gdy użytkownik kliknie "zapisz". Nienaruszony na IE.

Answer 6

Lubię jQuery http://docs.jquery.com/UI/Sortables

$ ("# myList") sortable ({}).;

Będziesz musiał napisać kod, aby go zachować, ale nie jest to trudne.

Answer 7

Z Prototype i Scriptaculous:

Sortable.create('yourTable', { 
    tag: 'tr', 
    handles: $$('a.move'), 
    onUpdate: function() { 
     console.log('onUpdate'); 
    } 
});