- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个可以有多个 PropertyLists 的模板,我的目标是拥有一个包含相关 PropertyLists 和可用 PropertyLists 的表单。
在这种形式中,我希望能够拖放和排序项目。
我正在使用带有 nested_form_fields 的 Rails 5和 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
class TemplatePropertyList < ApplicationRecord
belongs_to :template
belongs_to :property_list
end
$(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
将在 Template PropertyLists 部分具有 PropertyLists 并具有正确的 order 参数。请注意,这是一个简单的表单提交,而不是拖放或排序时的 AJAX。
最佳答案
为了解决这个问题,我在 available_property_lists 中使用了一个隐藏字段。通过添加:
<%= 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' %>
_destroy
复选框:
$(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);
});
});
关于ruby-on-rails - Rails拖放和排序元素到nested_form,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38623575/
我在 Rails 3.1 应用程序中使用 gemnested_form。问题是,当我点击“link_to_add”生成的链接时,它会显示两次,而它应该只显示一次。你有一些代码: 形式: {:mult
我有一个嵌套表单(按订单付款),我想在编辑 View 中测试嵌套表单 (fields_for) 中的值。但问题是我无法检查每一个,我可以这样做: 您现在是否可以检查每个,例如: 最佳答案 如果我理
我正在使用来自 GitHub 的 Ryan Bates 的nested_form gem 的 madebydna 版本(可以在 https://github.com/madebydna/nested_
我目前有一个具有深度嵌套的复杂表单,并且我正在使用 Cocoon gem 根据需要动态添加部分(例如,如果用户想要在销售表单中添加另一辆车)。代码如下所示: "sale_vehicles/
我在 _form.html.haml 部分中有以下代码,它用于新建和编辑操作。(仅供引用,我使用 Ryan Bates 的插件 nested_form ) .fields - f.fields
我的模型中有以下代码: Class Farm :destroy has_many :products, :through => :farm_products accepts_nested_a
我正在使用 Ryan Bates nested_form_for:https://github.com/ryanb/nested_form .对于我的 select 语句,我使用的是 chosen-s
我正在使用嵌套表单 gem,其中有两个字段, View 给出为
更新:根据在此问题末尾发布的堆栈跟踪,我认为真正的问题是弄清楚我需要什么 attr_accessible 和构建关联设置来获取贡献者和链接器属性以使用新的 isbn id 进行更新。请帮我! 继 th
我的 new.html.erb 工作正常。 但是在我的 edit.html.erb 中,假设我有 3 个现有部门... 每当我单击“添加部门”链接(以添加另一个字段)时,它都会继续位于现有部门上方,而
我正在研究如何为嵌套模型动态添加表单字段,并偶然发现了 nested_form ryanb 的插件。毫无疑问,这是一段很棒的代码,但我想知道为什么它必须如此复杂? 示例:用于创建/添加项目的表单分配了
在 Ruby on Rails 应用程序中,假设我有一个 Item 和一个 Order 模型,如下所示: class Item :name :default_price end class O
我有一个嵌套形式并使用 ryan bates 的 nested_form gem,其中我在该领域使用 raty stars,形式给出为 'btn
Update: answered here . 这里和互联网上有很多关于让nested_form、collection_select、accepts_nested_attributes_for 和fi
我通常不为表单使用表格,但是当有嵌套表单时(当使用 nested_form 或 cocoon gem 时),是否可以将每组表单元素放在表格行中? 对我来说,这似乎很直观:表格中的每一行都代表一个对象。
我的问题有点类似于问题 nested_form gem add works but remove fails...why? . 我有一个产品编辑页面,其中产品的子类别链接在 product_sub_c
更新:在进行了一些挖掘并意识到这可能是导致问题的 twitter-bootstrap 之后,我更新了它。 这是我的嵌套表单的粗略版本: { :class => 'form-horizontal' }
我已经为这个问题苦苦挣扎了好几天,而且似乎无法弄清楚出了什么问题。我正在尝试允许模型Item属于模型Location的多态文件附件。我的路线定义为: resources :locations do
我对 gem nested_form 有点问题。我有: class Factura :itemfacturas accepts_nested_attributes_for :itemfactura
我正在使用 simple_form、nested_form 和 Twitter Bootstrap,并尝试将 nested_form 中的“删除链接”与对象放在同一行。 现在它看起来像这样: http
我是一名优秀的程序员,十分优秀!