新手问题 关于 Modal 局部更新的问题 + 复杂表单

jing · 2015年07月17日 · 2635 次阅读

https://l.ruby-china.com/photo/2015/9a42b591937ab36d903288acd3c24b9f.png 我想要实现像上图一样的添加功能:点击 Add 按钮,multiselect 中的选项会添加到上面的 table 中。 因为 table 中的变量是个临时中间变量,所以只想局部更新。 可以用 jquery,ajax 实现吗?还是要用 helper?不是很想用 nested_form. jquery 写了一点不知道怎么返回数据到 modal 对话中去,由于刚接触 RoR 不久不知道该怎么实现这样的功能。高手求助。

$('#add_vm').on('click', function() {

        var selected_vms = [];
        $('#serv-multiselect option:selected').each(function() {
            selected_vms.push($(this).val());
        });

        selected_vms.sort(function(a,b)){
          return a[0]-b[0];
        });

         $("#vm-table").append('<tr><td>。。。</td></tr>');
});
route:
resources :apps do
  resources :service_in_apps
end

Model:
class App < ActiveRecord::Base
  has_many :service_in_apps 
  accepts_nested_attributes_for :service_in_apps
end

class ServiceInApp < ActiveRecord::Base
  has_many :vm_install_service_ins
  has_many :vms, through: :vm_install_service_ins

  belongs_to :apps, foreign_key:"app_id", dependent: :destroy

  accepts_nested_attributes_for :vm_install_service_ins
end

class VmInstallServiceIn < ActiveRecord::Base
  belongs_to :vms,:class_name=>"Vm", foreign_key:"vm_id", dependent: :destroy
  belongs_to :service_in_apps,:class_name=>"ServiceInApp", foreign_key:"service_in_app_id", dependent: :destroy
end

class Vm < ActiveRecord::Base
  has_many :vm_install_service_ins,foreign_key:"vm_id"
  has_many :service_in_apps, through: :vm_install_service_ins
end

Controller:
class ServiceInAppsController < ApplicationController
before_action :set_app

  def index
    @service_in_apps = @app.service_in_apps
    @vm_installs=@service_in_apps.vms.build
  end

private
  def set_app
    @app=App.find(params[:app_id])
  end
end

View:
# modal dialog (index)
    <%= form_for @app, :url=> app_service_in_apps_path(@app) do |f| %>
          <%= render 'service_in_apps/form_tech', :f=>f %>
    <% end %>
# _form_tech.html.erb
<div class="field">
  <div id="vm-conf">
    <table class="table table-hover" id="vm-table">
      <caption>VM Configuration</caption>
      <thead>
        <tr>
          <th>Nom</th>
          <th>Template</th>
          <th>Etat</th>
          <th>IP Adresse</th>
          <th>Actions</th>
        </tr>
      </thead>

      <tbody>
        <% if @vm_installs.present? %>
            <% @vm_installs.each do |vm| %>
              <tr>
                <td><%= vm.nom%></td><td><%=vm.template %></td><td><%=vm.etat_app.nom %></td><td><%= ip_defaut %></td>
                <td><%= link_to 'Destroy', vi, :confirm => 'Are you sure?', :method => :delete %></td>
              </tr>
            <% end %>
        <% end %>
      </tbody>
    </table>

      <%=fields_for @vm_installs do |vi|%>
        <div class="field">
          <%= vi.label "Selection VMs : " %><%= vi.select :ids, Vm.all.map { |vm| [vm.nom, vm.id] }, {:prompt => false}, 
                                                                             {:class=>'multiselect', multiple:'multiple', id:"VM-multiselect"}%>
          <%= link_to "Add", :data => { :"disable-with"=> "Loading..."}, id: "add_vm", :remote => true, class: 'btn btn-default' %>
        </div>
      <% end %>


</div><!--field -->

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请 注册新账号