Quel est le moyen le plus simple pour permettre à un utilisateur de faire glisser et déposer des lignes de table afin de changer leur ordre?

Question

J'ai une application Ruby on Rails que j'écris où un utilisateur a la possibilité de modifier une facture. Ils doivent être en mesure de réaffecter l'ordre des lignes. À l'heure actuelle, j'ai une colonne d'index dans la base de données qui est utilisée comme mécanisme de tri par défaut. Je viens d'exposer cela et permis à l'utilisateur de l'éditer.

Ce n'est pas très élégant. J'aimerais que l'utilisateur puisse glisser et déposer des lignes de tableau. J'ai utilisé Scriptaculous et Prototype un peu et je suis familier avec eux. J'ai fait glisser et déposer des listes, mais je n'ai pas fait de lignes de table comme ça. Quelqu'un at-il des suggestions pour non seulement réorganiser mais capturer la réorganisation efficacement?

En outre, l'utilisateur peut créer dynamiquement une nouvelle ligne dans JS dès maintenant, de sorte que cette ligne doit également être réorganisable.

Points bonus si cela peut être fait avec RJS au lieu de JavaScript direct.

Answer 1

J'ai utilisé la bibliothèque de l'interface utilisateur Yahoo de le faire avant:

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

Answer 2

Scriptaculous Sortables semble être le chemin à parcourir, car il est construit en http://github.com/madrobby/scriptaculous/wikis/sortable

Answer 3

L'interface Yahoo a été. plus facile que je ne l'imaginais, avait quelque chose de super efficace en moins de quatre heures.

Answer 4

MooTools Les triables sont en réalité meilleurs que script.aculo.us car ils sont dynamiques; MooTools permet l'ajout/suppression d'éléments à la liste. Lorsqu'un nouvel élément est ajouté à un fichier script.aculo.us, vous devez détruire/recréer le sortable pour rendre le nouvel objet triable. Il y aura beaucoup de frais généraux si la liste contient de nombreux éléments. J'ai dû passer de script.aculo.us à MooTools plus léger juste à cause de cette limitation et fini par être extrêmement heureux avec cette décision.

La façon de faire MooTools un élément triables est nouvellement ajouté que:

sortables.addItems(node); 

Answer 5

D'accord, je l'ai fait un peu plus récurage et pensé quelque chose qui semble être la plupart du temps de travail.

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/controllers/invoices.rb

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

La partie importante est: tag =>: tr dans "sortable_element" et params [ "line_items "] - ceci donne la nouvelle liste d'ids et est déclenché sur la goutte. Détriments: Fait tomber l'appel AJAX, je pense que je préfère stocker la commande et mettre à jour quand l'utilisateur frappe "sauver". Non testé sur IE.

Answer 6

J'aime jQuery http://docs.jquery.com/UI/Sortables

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

Vous aurez besoin d'écrire du code pour le conserver, mais ce n'est pas si difficile.

Answer 7

Avec Prototype et Scriptaculous:

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