0

我正在尝试创建一个从输入框表中获取值的表单。用户可以手动输入此表中的值，或上传 Excel 电子表格。所有这些都可以正常工作，但我希望用户能够导入电子表格，并在不重新加载页面的情况下更新数据表。存储此信息的主要模型是 DataTable 对象。

views/data_tables/index.html.erb 看起来像这样：

<div id="tabs" class="tabs-bottom">
    <ul>
        <li><a href="#tabs-1">Data Input</a></li>
        <li><a href="#tabs-2">Data Display</a></li>
    </ul>
    <div class="tabs-spacer"></div>
    <div id="tabs-1" class="tab_frame">
        <%= render @data_table %>
    </div>
    <div id="tabs-2" class="tab_frame">
        <%= render "data_display" %>
    </div>
</div>

我正在使用来自 Jquery-UI 的选项卡式视图。

部分views/data_tables/_data_table.html.erb 看起来像这样：

<%= nested_form_for @data_table, :remote => true do |f| %>
    <div id="table_pane">
    <table id="table_input" class="table_input">
        <tbody>
            <%= f.fields_for :financial_rows, :wrapper => false do |dr| %>
                <tr class="fields">
                    <td>
                        <%= dr.link_to_remove "x", {:class => "btn btn-danger"} %>
                    </td>
                    <td class="month">
                        <%= dr.text_field :month, :value => (dr.object.month.to_i) %>
                    </td>
                    <td class="year">
                        <%= dr.text_field :year, :value => (dr.object.year.to_i) %>
                    </td>
                   <td class="currency">
                       <% # . . .  %>
                       <% #Multiple fields omitted for brevity %>
                       <% # . . .  %>
                   </td>
               </tr>
            <% end %>
        </tbody>
    </table>
    <%= f.link_to_add "+", :financial_rows, :data => { :target => "#table_input" }, :class => "btn btn-success" %></br>
    </div>
    <%= f.submit :value => "Render Data" %>
<% end %>

<%= form_tag import_data_tables_path, multipart: true, remote: true do %>
    <%= file_field_tag :file %>
    <%= submit_tag "Import Spreadsheet" %>
<% end %>

最后的导入表格是我遇到的麻烦。在我的控制器 controllers/data_tables_controller.rb 中，我的导入方法如下所示：

def import
    @data_table = DataTable.new
    if !params[:file].blank?
        imported_file = params[:file]
        spreadsheet = read_file(imported_file)
        header = spreadsheet.row(2)
        (3..spreadsheet.last_row).each do |i|
            data = Hash[[header, spreadsheet.row(i)].transpose]
            f_row = FinancialRow.new
            f_row.attributes = data.to_hash.slice(*FinancialRow.accessible_attributes)

            @data_table.financial_rows << f_row
        end
        respond_to do |format|
            format.html { redirect_to @data_table}
            format.js
            format.json { render json: @data_table, location: @data_table}
        end
        #render('index')
    else
        flash[:error] = "Select a file for import"
        @data_table.financial_rows.build
        #render('index')
    end
end

当我在不尝试使用 Ajax 的情况下导入文件时，页面会重新加载，数据表的文本字段已完全填充，但是当我尝试使用 Ajax 时，页面只是重新加载而对数据表没有任何更新。我写了一个javascript文件，理论上应该替换数据表所在的div。

views/data_tables/import.js.erb 包含：

$("#tabs-1").html("<%= escape_javascript(render(:partial => @data_table)).html_safe %>");

我已经搜索了几个小时的 stackoverflow，阅读了有关如何使用 Ajax 替换渲染部分的帖子，但我没有找到任何对我有用的东西。我确信这是我忽略的一些简单的事情，但是我很难理解如何用 Rails 实现 Ajax，以及如何以及为什么应该使用 format.html、format.js 或 format .json。

我正在使用导轨 3.2.12。我正在使用的一些值得注意的 gem 是用于处理 data_table 表单的“nested_form”gem，以及用于处理电子表格导入的“roo”。

4

0 回答 0