Rails 6将输入添加到页面中的列表

Posted 2023-02-15

【中文标题】Rails 6将输入添加到页面中的列表

【英文标题】：Rails 6 Add input to listing in page

【发布时间】：2021-08-29 06:52:50

【问题描述】：

我需要您的帮助来了解如何在表单下方的表格中显示用户在表单中输入的内容。有一个模型（输入），我希望只显示最近添加到数据库表中的内容......我已经有了表格，表格显示了包含太多行的模型索引，我希望我能说清楚。我知道会涉及到一些 jQuery 和 Ajax。新的输入记录将被添加到数据库的表中，但我只想显示用户输入的内容。也许已经有针对此或其他解决方案的 Railscast，我只是不知道如何搜索或询问。谢谢你。 这是我已有的表格：

<%= form_with(model: input, id: "new-input", local: false) do |form| %>
  <% if input.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(input.errors.count, "error") %> prohibited this input from being saved:</h2>

      <ul>
        <% input.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
   
  <div style="padding-top: 50px;padding-bottom: 30px;">
    <table class="show-table">
      <tr>
        <td>Proveedor:</td>
        <td colspan="3"><%= form.collection_select :supplier_id, @suppliers, :id, :name,  :prompt => "Proveedor sugerido"%></td>
      </tr>
      <tr>
        <td>Factura:</td>
        <td><%= form.text_field :invoice %></td>
        <td>Fecha:</td>
        <td><%= form.date_field :input_date %></td>
      </tr>
    </table>
    <div class="void-space">
      <br>
    </div>
    <table class="index-table">
      <thead>
        <tr>
          <td>Producto</td>
          <td>Precio Unit.</td>
          <td>Cantidad</td>
          <td>Costo</td>
          <td>Ubicación</td>
          <td>Acción</td>
        </tr>
      </thead>
      <tbody>
        <%  %>
        <tr>
          <td><%= form.collection_select :product_id, @products, :id, :name,  :prompt => "Producto"%></td>
          <td><%= form.text_field :price %></td>
          <td><%= form.text_field :quantity %></td>
          <td>costo</td>
          <td><%= form.text_field :location %></td>
          <% form.hidden_field :user_id, value: current_user.id %>
          <td><%= form.submit "Guardar", class: "btn success" %></td>
        </tr>
      </tbody>
    </table>
  </div>

<% end %>

这个 for 是从 index.html.erb 渲染的，它工作正常，但我不想看到所有输入的表记录，只是新的

【参考方案1】：

我想您将 user_id 存储在 Product 模型上。在这种情况下，您可以在 Product 模型上添加范围

scope :created_by, ->(user_id)  where(user_id: user_id) 

并更改您的表格以使用范围集合，所以它最终会像

<td><%= form.collection_select :product_id, @products.created_by(current_user.id), :id, :name,  :prompt => "Producto"%></td>

【参考方案2】：

所以我找到了解决方案，它可能对某人感兴趣，所以它是：它涉及控制器中的一个新操作来处理这种情况，我想显示列出正在输入的记录的表格......创建inputs_controller.rb 中的路由和新操作：

# GET /list_inputs
  def list_inputs
    @input_list = params[:input] || []
    new_input
  end

'new_input' 是一种初始化所有实例变量的方法，这些变量也用于“new”和“create”操作：

def new_input
  if action_name == 'create'
    @input = Input.new(input_params)
  else
    @input = Input.new
  end
  @suppliers = Supplier.all
  @products = Product.all
  @user = current_user
end

定义一个视图然后 app/views/inputs/list_inputs.html.erb

<h1>Registro de entradas al almacén</h1>

<%= render 'form', input: @input %>

<table class="index-table">
  <tbody id='input-list'>
    <% @input_list.each do |input| %>
      <%= render 'inputs', input: input %>
    <% end %>
  </tbody>
</table>

<br>

<%= content_for :footer do %>
  <p id="notice"><%= notice %></p>
<%  end %>

“输入”的部分内容 (app/views/inputs/_input.html.erb)：

<tr>
  <td><%= input.product.name %></td>
  <td><%= input.quantity %></td>
  <td><%= input.user.name %></td>
  <td><%= input.location %></td>
  <td class="botones"><%= link_to 'Destroy', input, class: "btn info", method: :delete, data:  confirm: '¿Confirma?'  %></td>
</tr>

还有 javascript 来

respond_to do |格式|

在 'inputs_controller#create' 操作中，该操作必须位于 app/views/inputs/create.js.erb 中

// Render input
var body = document.getElementById("input-list");
body.innerHTML = "<%= j render @input %>" + body.innerHTML;

//Clear and Focus input form
var input = document.getElementById("input_product_id");
input.value = '';
input.focus();

这段代码产生了这样的效果：

我知道这可能不是最有效的解决方案，但它确实有效，如果您愿意发表评论，我将不胜感激。

【讨论】：

这篇优秀文章的致谢：joelc.io/ajax-ruby-on-rails-forms