Question

我跟随Railscast关于可排序列表，它完美地适用于一个可排序列表。但是当我尝试创建两个连接的可排序列表时，我发现序列化只能存储元素的ID。有没有办法让序列化存储也列出每个列表元素id的id？或者将list的元素parent id合并到serialize结果中？

这个答案jQuery-UI Sortable Connected-Lists save order and association to rails model非常接近我所看到的，在此之后我已经设法在列表之间拖动元素并成功将其保存到db，但是使用一个列表排序元素无法正确保存。 / p>

查看

<% @project.tasks.group_by(&:column).each do |column, tasks| %>
    <ul id='tasks_<%= column %>' data-update-url='<%= sort_project_tasks_url(@project) %>'>
    <% tasks.sort_by! { |t| t.priority }.each do |task| %>
        <li id="task_<%= task.id %>">
        <%= task.name %>| <%= column %> | <b><%= task.priority %></b>
        </li>
    <% end %>
    </ul>
<% end %>

我使用的脚本普通序列化变体。

jQuery ->
    $('#tasks_done').sortable
    connectWith: '#tasks_dev'
    update: ->
        $.post($(this).data('update-url'), $(this).sortable('serialize'))

我从链接问题得到的脚本。它也适用于在列表之间拖动元素，但在列表中排序将无法正确保存

jQuery ->
    $('#tasks_dev').sortable
    connectWith: '#tasks_done'
    update: (event, ui) ->
        neworder = new Array()
        $(this).children().each ->
            column = $(this).parent().attr('id')
            id = $(this).attr('id').match(/((?!task_).)*$/)[1]
        neworder.push(
            id: id
        column: column
        )
    $.post($(this).data('update-url'), Activity: JSON.stringify(neworder))

控制器中的相应操作（暂时没有强制参数），针对第二个脚本变体进行了更新

def sort
     JSON.parse(params[:Activity]).each_with_index do |data, index|
     id = data['id']
     priority = index + 1
     column = data['column']
     column.slice! 'tasks_' # columns ids are tasks_<%= task.column %>
     task = Task.find(id)
     task.update_attributes(priority: priority, column: column)
end

因此，主要问题是：我无法弄清楚如何在一个列表中保存排序结果，同时跟踪列表之间移动的元素。在服务器端看起来很容易，但我对前端缺乏经验，无法弄清楚如何在客户端正确形成params。

Answer 1

所以，这是我提出的解决方案。您基本上只需获取列表的ID，将其附加到可排序（＆＃39;序列化＆＃39;）结果并发布。

tasks.coffee（我稍后会用.erb重构它）

jQuery ->
    $('#tasks_done').sortable
    connectWith: '#tasks_dev'
    update: ->
        $.post($(this).data('update-url'), 'column' + '=' + $(this).attr('id') + '&' + $(this).sortable('serialize'))

jQuery ->
    $('#tasks_dev').sortable
    connectWith: '#tasks_done'
    update: ->
        $.post($(this).data('update-url'), 'column' + '=' + $(this).attr('id') + '&' + $(this).sortable('serialize'))

tasts_controller.rb

def sort
    column = params[:column].delete! 'tasks_'
    params[:task].each_with_index do |id, index|
        Task.where(id: id).update_all(priority: index + 1, column: column)
    end
end

形成的参数： http://imgur.com/a/tHNj9

（抱歉，没有足够的代表直接添加图片）

JQuery可排序列表connectWith serialize？

1 个答案: