允许用户拖放表行以更改其顺序的最简单方法是什么?

时间:2008-10-03 16:33:13

标签: html ruby-on-rails ajax

我正在编写一个Ruby on Rails应用程序,用户可以选择编辑发票。他们需要能够重新分配行的顺序。现在我在db中有一个索引列,用作默认排序机制。我刚刚曝光并允许用户编辑它。

这不是很优雅。我希望用户能够拖放表格行。我已经使用了Scriptaculous和Prototype,并熟悉它们。我已经完成了拖放列表,但没有像这样完成表行。任何人都有任何建议,不仅要重新排序,还要有效地捕获重新订购?

此外,用户现在可以在JS中动态创建新行,因此该行也必须可以重新排序。

如果可以使用RJS而不是直接JavaScript来完成加分。

7 个答案:

答案 0 :(得分:2)

我之前使用过Yahoo User Interface库来执行此操作:

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

答案 1 :(得分:2)

MooTools sortables实际上比script.aculo.us好,因为它们是动态的; MooTools允许在列表中添加/删除项目。将新项目添加到script.aculo.us sortable时,您必须销毁/重新创建可排序项以使新项目可排序。如果列表包含许多元素,那么这样做会有很多开销。因为这个限制,我不得不从script.aculo.us切换到更轻量级的MooTools,最终对这个决定非常满意。

MooTools使新添加的项目可排序的方式只是:

sortables.addItems(node);

答案 2 :(得分:2)

好吧,我做了一些淘洗,并想出了一些似乎主要起作用的东西。

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}) -%>
...

应用程序/控制器/ invoices.rb

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

重要的部分是:tag =&gt; :tr中的“sortable_element”和params [“line_items”] - 这给出了新的id列表并在drop上触发。

不利:让AJAX调用掉线,我想我更喜欢存储订单并在用户点击“保存”时更新。在IE上未经测试。

答案 3 :(得分:2)

我喜欢jQuery http://docs.jquery.com/UI/Sortables

$( “#myList中”)可排序({});

你需要编写一些代码来坚持它,但它并不那么难。

答案 4 :(得分:1)

雅虎界面比我想象的要容易,在不到四个小时的时间里做了一些时髦的工作。

答案 5 :(得分:0)

Scriptaculous sortables似乎是内置的方式。 http://github.com/madrobby/scriptaculous/wikis/sortable

答案 6 :(得分:0)

PrototypeScriptaculous

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