Rails 将元素拖放并排序到 nested_form
Rails Drag & Drop & sort elements to a nested_form
我有一个可以包含多个 PropertyList 的模板,我的目标是拥有一个包含关联 PropertyList 和可用 PropertyList 的表单。
在这种形式下,我希望能够拖放和排序项目。
我正在使用 Rails 5,带有 nested_form_fields 和 JQuery-ui(仅 jquery-ui/sortable 模块)。
这是我的模型:
模板:
class Template < ApplicationRecord
has_many :template_property_lists
has_many :property_lists, through: :template_property_lists
accepts_nested_attributes_for :property_lists
validates_presence_of :name
end
属性列表:
class PropertyList < ApplicationRecord
has_many :properties, -> { order(position: :asc) }, dependent: :destroy
has_many :template_property_lists
has_many :templates, through: :template_property_lists
accepts_nested_attributes_for :properties, allow_destroy: true, reject_if: :all_blank
acts_as_list scope: :template, top_of_list: 0
validates_presence_of :name
validates_uniqueness_of :name
end
TemplatePropertyList:
class TemplatePropertyList < ApplicationRecord
belongs_to :template
belongs_to :property_list
end
和 JavaScript 代码:
$(function() {
$(".sortable").sortable({
update: function(event, ui) {
var index = ui.item.index();
ui.item.find('input.position').val(index);
}
}).disableSelection();
});
$( function() {
$( ".used, .available" ).sortable({
connectWith: ".connected-sortable",
placeholder: "ui-state-highlight"
}).disableSelection();
} );
表格部分:
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">
<%= t(:template) %>
</h1>
</div>
<div class="panel-body">
<div class="col-md-6">
<div class="form-group <%= 'has-error' if @template.errors[:name].present? %>">
<%= f.label :name, t(:name) %>
<%= f.text_field :name, class: 'form-control' %>
</div>
</div>
<div class="col-md-6">
<div class="form-group <%= 'has-error' if @template.errors[:description].present? %>">
<%= f.label :description, t(:description) %>
<%= f.text_field :description, class: 'form-control' %>
</div>
</div>
</div>
</div>
<!-- Template Property Lists -->
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">
<%= t(:property_lists) %>
</h1>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<div class="row text-center">
<div class="col-md-1"></div>
<div class="col-md-5">
<%= label_tag t(:name) %>
</div>
<div class="col-md-5">
<%= label_tag t(:description) %>
</div>
<div class="col-md-1 text-center"></div>
</div>
</li>
</ul>
<ul class="list-group used connected-sortable">
<%= f.nested_fields_for :property_lists do |p| %>
<li class="list-group-item">
<%= p.hidden_field :position, class: 'position' %>
<%= p.hidden_field :name %>
<%= p.hidden_field :description %>
<div class="row text-center">
<div class="col-md-1">
<span class="glyphicon glyphicon-sort"></span>
</div>
<div class="col-md-5">
<%= p.object.name%>
</div>
<div class="col-md-5">
<%= p.object.description%>
</div>
<div class="col-md-1 text-center"></div>
</div>
</li>
<% end %>
</ul>
</div>
</div>
<!-- Available Property Lists -->
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">
<%= t(:available_property_lists) %>
</h1>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<div class="row text-center">
<div class="col-md-1"></div>
<div class="col-md-5">
<%= label_tag t(:name) %>
</div>
<div class="col-md-5">
<%= label_tag t(:description) %>
</div>
<div class="col-md-1"></div>
</div>
</li>
</ul>
<ul class="list-group available connected-sortable">
<% @available_property_lists.each do |property_list| %>
<li class="list-group-item">
<%= hidden_field_tag :position, class: 'position' %>
<%= hidden_field_tag :id, property_list.id %>
<div class="row text-center">
<div class="col-md-1">
<span class="glyphicon glyphicon-sort"></span>
<% property_list.id %>
</div>
<div class="col-md-5">
<%= property_list.name %>
</div>
<div class="col-md-5">
<%= property_list.description %>
</div>
</div>
</li>
<% end %>
</ul>
</div>
</div>
我的问题:
当我提交表单时,我希望选择与模板关联的模板列表,这意味着 property_lists_attributes
将在模板 PropertyLists 部分中具有 PropertyLists 并具有正确的顺序参数。请注意,这是一个简单的表单提交,而不是拖放或排序时的 AJAX。
为了解决这个问题,我在 available_property_lists.by 添加了一个隐藏字段:
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][property_list_id]", property_list.id %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][position]", property_list.position, class: 'position' %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][template_id]", template.id %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][_destroy]", true, class: 'destroy' %>
以及使用的隐藏字段:
<%= p.hidden_field :id %>
<%= p.hidden_field :position, class: 'position' %>
<%= p.hidden_field :property_list_id %>
<%= p.hidden_field :template_id %>
<%= p.hidden_field :_destroy, class: 'destroy' %>
和此 Javascript 用于排序和启用或禁用 [=13=] 复选框:
$(function() {
$(".used, .available").sortable({
connectWith: ".connected-sortable",
placeholder: "ui-state-highlight",
});
$(".available").on("sortremove", function(event, ui) {
ui.item.find('input.destroy').val(false);
});
$(".used").on("sortremove", function(event, ui) {
ui.item.find('input.destroy').val(true);
});
});
我有一个可以包含多个 PropertyList 的模板,我的目标是拥有一个包含关联 PropertyList 和可用 PropertyList 的表单。 在这种形式下,我希望能够拖放和排序项目。 我正在使用 Rails 5,带有 nested_form_fields 和 JQuery-ui(仅 jquery-ui/sortable 模块)。
这是我的模型:
模板:
class Template < ApplicationRecord
has_many :template_property_lists
has_many :property_lists, through: :template_property_lists
accepts_nested_attributes_for :property_lists
validates_presence_of :name
end
属性列表:
class PropertyList < ApplicationRecord
has_many :properties, -> { order(position: :asc) }, dependent: :destroy
has_many :template_property_lists
has_many :templates, through: :template_property_lists
accepts_nested_attributes_for :properties, allow_destroy: true, reject_if: :all_blank
acts_as_list scope: :template, top_of_list: 0
validates_presence_of :name
validates_uniqueness_of :name
end
TemplatePropertyList:
class TemplatePropertyList < ApplicationRecord
belongs_to :template
belongs_to :property_list
end
和 JavaScript 代码:
$(function() {
$(".sortable").sortable({
update: function(event, ui) {
var index = ui.item.index();
ui.item.find('input.position').val(index);
}
}).disableSelection();
});
$( function() {
$( ".used, .available" ).sortable({
connectWith: ".connected-sortable",
placeholder: "ui-state-highlight"
}).disableSelection();
} );
表格部分:
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">
<%= t(:template) %>
</h1>
</div>
<div class="panel-body">
<div class="col-md-6">
<div class="form-group <%= 'has-error' if @template.errors[:name].present? %>">
<%= f.label :name, t(:name) %>
<%= f.text_field :name, class: 'form-control' %>
</div>
</div>
<div class="col-md-6">
<div class="form-group <%= 'has-error' if @template.errors[:description].present? %>">
<%= f.label :description, t(:description) %>
<%= f.text_field :description, class: 'form-control' %>
</div>
</div>
</div>
</div>
<!-- Template Property Lists -->
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">
<%= t(:property_lists) %>
</h1>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<div class="row text-center">
<div class="col-md-1"></div>
<div class="col-md-5">
<%= label_tag t(:name) %>
</div>
<div class="col-md-5">
<%= label_tag t(:description) %>
</div>
<div class="col-md-1 text-center"></div>
</div>
</li>
</ul>
<ul class="list-group used connected-sortable">
<%= f.nested_fields_for :property_lists do |p| %>
<li class="list-group-item">
<%= p.hidden_field :position, class: 'position' %>
<%= p.hidden_field :name %>
<%= p.hidden_field :description %>
<div class="row text-center">
<div class="col-md-1">
<span class="glyphicon glyphicon-sort"></span>
</div>
<div class="col-md-5">
<%= p.object.name%>
</div>
<div class="col-md-5">
<%= p.object.description%>
</div>
<div class="col-md-1 text-center"></div>
</div>
</li>
<% end %>
</ul>
</div>
</div>
<!-- Available Property Lists -->
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">
<%= t(:available_property_lists) %>
</h1>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<div class="row text-center">
<div class="col-md-1"></div>
<div class="col-md-5">
<%= label_tag t(:name) %>
</div>
<div class="col-md-5">
<%= label_tag t(:description) %>
</div>
<div class="col-md-1"></div>
</div>
</li>
</ul>
<ul class="list-group available connected-sortable">
<% @available_property_lists.each do |property_list| %>
<li class="list-group-item">
<%= hidden_field_tag :position, class: 'position' %>
<%= hidden_field_tag :id, property_list.id %>
<div class="row text-center">
<div class="col-md-1">
<span class="glyphicon glyphicon-sort"></span>
<% property_list.id %>
</div>
<div class="col-md-5">
<%= property_list.name %>
</div>
<div class="col-md-5">
<%= property_list.description %>
</div>
</div>
</li>
<% end %>
</ul>
</div>
</div>
我的问题:
当我提交表单时,我希望选择与模板关联的模板列表,这意味着 property_lists_attributes
将在模板 PropertyLists 部分中具有 PropertyLists 并具有正确的顺序参数。请注意,这是一个简单的表单提交,而不是拖放或排序时的 AJAX。
为了解决这个问题,我在 available_property_lists.by 添加了一个隐藏字段:
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][property_list_id]", property_list.id %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][position]", property_list.position, class: 'position' %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][template_id]", template.id %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][_destroy]", true, class: 'destroy' %>
以及使用的隐藏字段:
<%= p.hidden_field :id %>
<%= p.hidden_field :position, class: 'position' %>
<%= p.hidden_field :property_list_id %>
<%= p.hidden_field :template_id %>
<%= p.hidden_field :_destroy, class: 'destroy' %>
和此 Javascript 用于排序和启用或禁用 [=13=] 复选框:
$(function() {
$(".used, .available").sortable({
connectWith: ".connected-sortable",
placeholder: "ui-state-highlight",
});
$(".available").on("sortremove", function(event, ui) {
ui.item.find('input.destroy').val(false);
});
$(".used").on("sortremove", function(event, ui) {
ui.item.find('input.destroy').val(true);
});
});