首页 > 解决方案 > 更改嵌套内容的顺序

问题描述

我创建了一个 Rails 应用程序来根据类别创建问题。编辑我的问题时,我希望能够选择问题出现的顺序

在此处输入图像描述


显示图像 bdd

列排序与 question_id 相同,但我的问题是一个嵌套的类别,所以我想要子资源的排序当我拖放一个元素时,列排序不会改变,所以当我重新刷新时,顺序是相同的

标签: ruby-on-railsruby

解决方案


'rails_sortable' gem 可能是您正在寻找的解决方案。它是 jquery 可排序库 ( https://jqueryui.com/sortable/ ) 的包装器 gem。

它将允许您通过拖放重新排序问题。

将以下 gem 添加到您的 gem 文件并运行 bundle install

gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'rails_sortable'

将以下 require 语句添加到 application.js 文件

//= require jquery
//= require jquery_ujs
//= require jquery-ui/widgets/sortable
//= require rails_sortable

现在您需要在您的问题模型中添加排序列(我在这里假设您的模型名称是问题)说“排序”或“位置”。这将是特定问题的位置/顺序

然后将以下内容添加到您的 Question.rb(model) 文件中

class Question < ApplicationRecord
  include RailsSortable::Model
  set_sortable :sort  # Indicate a sort column
  # If you do NOT want timestamps to be updated on sorting, use the 
  following option.
  # set_sortable :sort, without_updating_timestamps: true
end

在控制器中获取问题数据时,根据排序列对其进行排序

class QuestionsController < ApplicationController
  def index
    @questions = Question.order(:sort).all
  end
end

而在看来,

<table>
  <tbody class="sortable">  <!-- sortable target -->
    <% @questions.each_with_sortable_id do |question, sortable_id| %>
      <tr id="<%= sortable_id %>">  <!-- Needs id tag on sorting 
      elements -->
       <td><%= question.id %></td>
       <td><%= question.content %></td>
       <td><%= question.category_id %></td>
       <td><%= question.sort %></td>
     </tr>
    <% end %>
  </tbody>
</table>

最后在 javascript 文件中,

$(function() {
 $('.sortable').railsSortable(); 
});

rails_sortable github 页面:https ://github.com/itmammoth/rails_sortable


推荐阅读