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

对于每个项目,都有一个排序字段来指定排序(1到n).一旦用户完成了可拖动排序,则将排序发布到阵列中的Rails后端,例如,[1,5,3,6,2,4].数组中的数字是项目的ID.基于这个数组,我可以更新订购字段.例如,数组中的第一项(id = 1)具有排序1,第二项(id = 5)具有排序2.稍后,您可以使用顺序(“排序ASC”)进行排序.

首先,有一个排序视图(路由是获取’items / sort’)供用户进行可拖动排序.它看起来像这样(纤细的格式)：

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的排序来更新表单的隐藏字段.

排序完成后,用户单击“保存更改”按钮,将其发布到使用item_ids参数的路径项目/订购.控制器中的方法如下所示：

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

如果您不想使用表单,可以尝试使用AJAX进行转换.