0
我有一個可排序的表，它似乎工作正常，但是當我刷新頁面時，順序略有偏離。基本上所有的東西都是正確的，除了我移動的最後一行之外，它通常會回覆到它應該佔據的一行之下的一行。 （例如：如果我想讓訂單爲1,4,2,3，我移動到的最後一個框是框4;刷新時我得到1,2,4,3）希望這是有道理的。Rails jquery sortable不正確保存位置
我的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>
我的DB：
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