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

我的控制器：

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

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

Rails jquery可排序无法正确保存位置

1 个答案: