javascript - Rails jquery sortable 无法正确保存位置

Question

我有一个可排序的表格，它似乎工作正常，但是当我刷新页面时，顺序略有偏差。基本上一切都会正确并且在正确的位置，除了我移动的最后一行，它通常会恢复到它应该占据的行下方的一行。 (例如:如果我希望顺序为 1,4,2,3，而我最后移动到位的框是框 4；刷新时我得到 1,2,4,3)希望这是有道理的。

我的jquery:

jQuery ->
  if $('#sortable').length > 0
    table_width = $('#sortable').width()
    cells = $('.table').find('tr')[0].cells.length
    desired_width = table_width / cells + 'px'
    $('.table td').css('width', desired_width)

    $('#sortable').sortable(
      axis: 'y'
      items: '.item'
      cursor: 'move'

      sort: (e, ui) ->
        ui.item.addClass('active-item-shadow')
      stop: (e, ui) ->
        ui.item.removeClass('active-item-shadow')
      update: (e, ui) ->
        item_id = ui.item.data('item-id')
        console.log(item_id)
        position = ui.item.index() # this will not work with paginated items, as the index is zero on every page
        $.ajax(
          type: 'POST'
          url: '/stripboards/update_row_order'
          dataType: 'json'
          data: { stripboard: {stripboard_id: item_id, row_order_position: position } }
        )
    )

我的 Controller :

class StripboardsController < ApplicationController
    def index
        @stripboards = Stripboard.rank(:row_order).all
    end

    def new
        @stripboard = Stripboard.new
    end

    def edit
        @stripboard = Stripboard.find(params[:id])
    end

    def create
        @stripboard = Stripboard.new(stripboard_params)


        if @stripboard.save
            redirect_to stripboards_path
        else
            render 'new'
        end
    end

    def destroy
        @stripboard = Stripboard.find(params[:id])
        @stripboard.destroy

        redirect_to stripboards_path
    end

    def update_row_order
        @stripboard = Stripboard.find(stripboard_params[:stripboard_id])
        @stripboard.row_order_position = stripboard_params[:row_order_position]
        @stripboard.save

        render nostripboard: true # this is a POST action, updates sent via AJAX, no view rendered
    end

    private

    # Use callbacks to share common setup or constraints between actions.
    def set_stripboard
        @stripboard = Stripboard.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def stripboard_params
        params.require(:stripboard).permit(:stripboard_id, :title, :scene, :scene_type, :location, :description, :time, :pages, :characters, :production_id, :row_order_position)
    end
end

我的 HTML:

<table class="table table-bordered table-striped" id="sortable">
  <tr>
    <th class="col-sm-1">Scene #:</th>
    <th class="col-sm-1">INT/EXT:</th>
    <th class="col-sm-1">Time:</th>
    <th class="col-sm-4">Set:</th>
    <th class="col-sm-2">Location:</th>
    <th class="col-sm-1">Pages:</th>
    <th class="col-sm-2">Characters</th>
    <th></th>
  </tr>
  <% @stripboards.each do |stripboard| %>
    <tr data-item-id=<%= "#{stripboard.id}" %> class="item" style="
      <% if stripboard.time == 2 && stripboard.scene_type == 1 %>background-color:#FFFFFF;<% end %>
      <% if stripboard.time == 2 && stripboard.scene_type == 2 %>background-color:#FFFF00;<% end %>
      <% if stripboard.time == 4 && stripboard.scene_type == 1 %>background-color:#00008B;color:#FFF;<% end %>
      <% if stripboard.time == 4 && stripboard.scene_type == 2 %>background-color:#006400;color:#FFF;<% end %>
      <% if stripboard.time == 1 %>background-color:#FFC0CB;<% end %>
      <% if stripboard.time == 3 %>background-color:#F4A460;<% end %>
      ">
      <td class="col-sm-1"><%= stripboard.scene %></td>
      <td class="col-sm-1">
        <% if stripboard.scene_type == 1 %>INT<% end %>
        <% if stripboard.scene_type == 2 %>EXT<% end %>
      </td>
      <td class="col-sm-1">
        <% if stripboard.time == 1 %>Morning<% end %>
        <% if stripboard.time == 2 %>Day<% end %>
        <% if stripboard.time == 3 %>Evening<% end %>
        <% if stripboard.time == 4 %>Night<% end %>
      </td>
      <td class="col-sm-4"><%= stripboard.title %><br /><%= stripboard.description %></td>
      <td class="col-sm-2"><%= stripboard.location %></td>
      <td class="col-sm-1"><%= stripboard.pages %></td>
      <td class="col-sm-1"><%= stripboard.characters %></td>
      <td class="col-sm-2"><%= link_to 'Delete', stripboard_path(stripboard), class: "btn btn-danger btn-sm",
              method: :delete,
              data: { confirm: 'Confirm you want to permanently delete this strip.  This action cannot be undone, and will delete all data associated with this strip.' }  %></td>
    </tr>
  <% end %>
</table>

我的数据库:

create_table "stripboards", force: true do |t|
    t.string   "title"
    t.string   "scene"
    t.integer  "scene_type",    limit: 255
    t.string   "location"
    t.string   "description"
    t.integer  "time",          limit: 255
    t.string   "pages"
    t.string   "characters"
    t.datetime "created_at"
    t.datetime "updated_at"
    t.string   "production_id"
    t.integer  "row_order"
    t.integer  "stripboard_id"
  end

Answer 1

我似乎认出了 http://benw.me/posts/sortable-bootstrap-tables/ 中的代码。我刚刚让它为自己工作:)

在您重命名的 update_row_order 函数中，我猜是不小心将 nothing 符号重命名为 nostripboard。也许对疯狂的“东西”进行一些查找和替换？

尝试更新最后一行，使函数如下所示:

def update_row_order
  @stripboard = Stripboard.find(stripboard_params[:stripboard_id])
  @stripboard.row_order_position = stripboard_params[:row_order_position]
  @stripboard.save

  render nothing: true # this is a POST action, updates sent via AJAX, no view rendered
end

render Nothing: true 部分告诉 Rails 不渲染任何内容 - 不使用 View ，不使用模板，只需使用 HTTP 200 OK 状态进行响应。

由于我发现您的代码没有其他问题，请尝试此操作并返返回告。我还建议在您最喜欢的浏览器中使用开发控制台/开发工具的“网络”选项卡(我知道 Firefox 和 Chrome 有一个，在其他浏览器中还没有真正尝试过)。它将允许您嗅探 AJAX 发送的流量并标记，例如 500 状态响应。另外，您还应该阅读开发服务器的日志并查找其中的错误 - 我几乎可以肯定，如果您查看那里，将会出现错误。