Qual è il modo più efficiente per creare elenchi ordinabili trascinabili in Rails?

Question

Voglio creare elenchi ordinati trascinabili ma in base allo this blog la gemma acts_as_lists è molto intensiva per il server e dice anche che la compilazione fallisce. Suggeriscono la gemma del modello classificata, tuttavia sembra essere deprecato.

Quindi qual è il modo più efficiente per farlo senza causare un carico eccessivo sul server quando ci sono molti utenti che riorganizzano gli elenchi.

Answer 1

Io uso HTML5 Sortable jQuery Plugin.

Per ogni voce, c'è un ordinando campo per specificare l'ordinamento (da 1 a n). Una volta che l'ordinamento trascinabile viene eseguito dall'utente, l'ordine viene pubblicato nel backend di Rails in array, ad es. [1, 5, 3, 6, 2, 4]. Il numero in serie è id di elementi. Sulla base di questo array, posso aggiornare il campo che ordina. Ad esempio, il primo elemento (id = 1) nell'array ha l'ordinamento 1 e il secondo elemento (id = 5) ha l'ordine 2. Successivamente, è possibile utilizzare l'ordine ("ordinamento ASC") per l'ordine.

Innanzitutto, è presente una vista di ordinamento (il percorso è visualizza "voci/ordinamento") affinché l'utente esegua l'ordinamento trascinabile. E 'simile a questa (in formato slim):

div#items-sortable 
    - @items.each do |item| 
    = div_for item, data: {id: item.id} 
     = item.title 
     hr 

= form_tag action: :ordering do 
    = hidden_field_tag :items_ids, "" 
    = submit_tag 'Save Changes' 

La forma è quella di mantenere l'array ordinamento e consente ai dati di essere inviati al Rails.

Il Javascript (CoffeeScript) si presenta così:

sortable_element = document.getElementById('items-sortable') 
if sortable_element 
    $(sortable_element).sortable({ 
    placeholder: "<div style='border-style: dashed'>&nbsp;&nbsp;&nbsp;</div>" 
    }) 
    .bind('sortupdate', (e, ui) -> 
     orders = ui.endparent.children().map(-> return $(this).data("id")).toArray() 
     document.getElementById('items_ids').value = JSON.stringify(orders) 
    ) 

Quando l'utente fa la cernita, mantiene il campo nascosto di modulo aggiornato con l'ordinazione di elemento id.

Una volta che l'ordinamento è fatto e l'utente clicca il pulsante "Salva modifiche", è inviato per instradare oggetti/ordinare con item_ids parametri. Il metodo di controllo è simile al seguente:

def ordering 
    if (@orders = params[:items_ids]) && (@orders.present?) 
    @orders = JSON.parse(params[:items_ids]) 
    if @orders.kind_of?(Array) && @orders.size > 0 
     # Let build hash for mass update 
     data = {} 
     @orders.each_with_index do |iden, index| 
     data[iden] = {ordering: index} 
     end 
     Item.all.update(data.keys, data.values) # still update one-by-one at backend 
    end 
    end 
    respond_to do |format| 
    format.html { redirect_to items_path } 
    end 
end 

Se non si desidera utilizzare la forma, si può provare a convertirlo con AJAX.