如何从 AJAX 响应更新大表？答案

【问题标题】：How to update a large table from AJAX response?如何从 AJAX 响应更新大表？
【发布时间】：2012-03-17 14:37:17
【问题描述】：

如何使用 AJAX 更新以下大表（10 行 X 30 列）的每个单元格？

<table>
  <tr>
    <td>puts @table[0][0]</td>
    <td>puts @table[0][1]</td>
    ... 27 columns go here
    <td>puts @table[0][29]</td>
  </tr>
  ... 8 rows go here
  <tr>
    <td>puts @table[9][0]</td>
    <td>puts @table[9][1]</td>
    ... 27 columns go here
    <td>puts @table[9][29]</td>
  </tr>
</table>

我可以通过给它一个特定的 id 来更新第 0 行和第 0 列的单元格，如下所示

    <td id="r0c0">puts @table[0][0]</td>

并使用以下 javascript，它工作正常

document.getElementById("r0c0").innerHTML = '<%= @new_r0c0_value %>'

但由于表格非常大（300 个单元格），我正在寻找一个想法，如何在不使用特定 ID 标识每个表格单元格的情况下从一组值更新 300 个单元格。

任何人都知道如何在 AJAX 响应中传递一个数组以及如何使用该 AJAX 响应更新这个大表？

【问题讨论】：

您能否为表格构建完整的标记并将其发送回客户端？然后，您将删除现有的表，只需将服务器发送的“...
”字符串拖放到页面中。不知道 Rails，但我在 JSP 中做过。否则你可以使用数据表插件（如 YUI DataTable），它通常支持 ajax 加载和更新。
你确定你收到了来自 ajax 的响应吗？？如果是这样，您如何获得 rails 变量？？
@dku.rajkumar ：是的，我很确定；例如，“@new_r0c0_value”是在我称为“update_values”的控制器方法中计算的，它适用于同一表单中的所有其他字段
@Tony R：感谢您的及时回复；这看起来是个好主意，我会探索一下。

标签： javascript ruby-on-rails ajax html-table

【解决方案1】：

如果你在表格标签本身上加上一个id，你可以将表格中的所有单元格放入一个数组中，如下所示：

document.getElementById('myTable').getElementsByTagName('td');

然后，您将拥有一个包含表中所有 td 元素的数组，您可以循环访问并更新这些元素。

在某些浏览器中，仅删除整个表格并使用其中的新数据构建一个新表格而不是单独更改所有单元格可能会更好。问题在于，由于表格可以具有动态布局，因此每次更改单元格时浏览器可能不会非常有效地中继表格。

【讨论】：

为什么不循环遍历每一行呢？
@AlxVallejo - 我不明白你的问题。 OP 询问如何更新表格中的所有单元格，这个答案建议如何获取所有单元格的列表，以便可以遍历它们。有很多其他方法可以做到这一点，但这很简单并且有效。
啊，你是对的。这是tl;博士。我想在大多数情况下，您会从数据库中调用，这样循环遍历一行属性而不是一次遍历所有单元格会更容易。

【解决方案2】：

试试这个..

如果你能像这样构造一个数组 [[1,2,..27],[1,2,..27],..[1,2,..27]]

那么很容易将数据加载到该表中，而无需使用 ID 或其他任何东西。

<table>
        <% arr.each do |inner_arr| %>
                <tr>
                <% inner_arr.each do |val| %>
                        <td><%= val %></td>
                <% end %>
                </tr>
        <% end %>
</table>

【讨论】：

感谢 Vadivelan。我缺少的是从 AJAX 响应更新表的 js 片段，而不是如何在服务器上第一次构建它。
是的，你仍然可以在 js 中实现这一点。将上述表格内容放在部分文件中。在您的 ajax 操作中，构造数组并使用 codepage.replace_html 'elementID', :partial => file_namecode

【解决方案3】：

如果使用 JQuery，您可以使用 :nth-child 选择器。我这样做是为了在 Ajax 列表中突出显示当前更新的记录。

我有@assets，它是所有对象的集合，@asset 是当前更新的记录。带有表格的 _assets.html.erb 部分如下所示：

<% @assets.each_with_index do |asset, index| %>
  <tr class="link">
    <td class="num"> <%= link_to index + 1, asset, :remote => true, :onclick => "$('#spinner').show()" %> </td>
    <td> 
      <%= link_to asset.try(:patient).try(:display_name), asset, :remote => true, 
        :onclick => "$('#spinner').show()" %> 
    </td>
    ...
  </tr>
<% end %>

并在 update.js.erb 中执行此操作：

...
$("#assets").html("<%= escape_javascript( render "assets" ) %>");

$("table.listing > tbody tr:nth-child(<%= @assets.index(@asset) + 1 %>)").effect("highlight", {}, 3000);
...

使用索引和突出显示选择第 n 个子项。

【讨论】：