Rails拖放＆排序元素到nested_form

我有一个模板，可以有几个PropertyLists，我的目标是有一个与关联的PropertyLists和可用的PropertyLists的窗体。在这种形式下，我希望能够拖动&拖放和排序项目。我使用Rails 5，nested_form_fields和JQuery-ui（只有jquery-ui /可排序模块）。Rails拖放＆排序元素到nested_form

这里是我的模型：

模板：

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

对propertyList：

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：

和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>

我的问题： 当我提出想与模板关联已选定TemplateLists的形式，意义property_lists_attributes将在模板属性列表部分和正确的订单参数中具有PropertyLists。请注意，这是一个简单的表单提交，而不是一个AJAX拖动或排序时拖动&。

来源

2016-07-27 Paulo Fidalgo

为了解决这个问题我已经使用在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进行排序并启用或禁用_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); 
    }); 
});

来源

2016-08-02 21:33:24

Rails拖放＆排序元素到nested_form

回答

相关问题