ruby-on-rails - 在 Rails 中创建可拖动排序列表的最有效方法是什么？

Question

我想创建可拖动的有序列表，但根据 this blog acts_as_lists gem 是服务器密集型的，它还表示构建失败。他们建议使用排名模型 gem，但它似乎已被弃用。

那么当有许多用户重新排列列表时，在不给服务器造成巨大负载的情况下，最有效的方法是什么。

Answer 1

我使用 HTML5 Sortable jQuery Plugin .

对于每个项目，都有一个ordering 字段来指定排序(1 到n)。用户完成可拖动排序后，排序将以数组形式发布到 Rails 后端，例如[1, 5, 3, 6, 2, 4]。数组中的数字是项目的 id。基于这个数组，我可以更新 ordering 字段。例如，数组中的第一项(id = 1)的顺序为 1，第二项(id = 5)的顺序为 2。稍后，您可以使用 order("ordering ASC") 进行排序.

首先，有一个排序 View (路线是get 'items/sort')供用户进行可拖动排序。它看起来像这样( 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'

表单是为了保持排序数组并允许将数据发布到 Rails。

Javascript (CoffeeScript) 看起来像这样:

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)
    )

当用户进行排序时，它会根据项目 ID 的顺序更新表单的隐藏字段。

一旦排序完成并且用户点击“保存更改”按钮，它就会被发布到路由 items/ordering 与 item_ids 参数。 Controller 中的方法如下所示:

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

如果不想使用form，可以尝试用AJAX转换。