Rails jquery sortable无法正确保存位置

Posted 2023-05-08

【中文标题】Rails jquery sortable无法正确保存位置

【英文标题】：Rails jquery sortable not saving position correctly

【发布时间】：2016-05-01 03:25:59

【问题描述】：

我有一个可排序的表，它似乎工作正常，但是当我刷新页面时，顺序稍微偏离了。基本上一切都是正确的，并且在正确的位置，除了我移动的最后一行，它通常会恢复到它应该占据的行下方的一行。 （例如：如果我希望顺序是 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  
        )
    )

我的控制器：

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

【参考方案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 什么都不渲染 - 不使用视图，不使用模板，只需响应 HTTP 200 OK 状态。

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