如何从AJAX响应更新大型表格？

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

<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个单元格）我正在寻找一个想法如何从一个值数组中更新300个单元格而不用每个表格的单元格标识一个特定的ID。

任何人有一个聪明的想法如何通过一个数组中的AJAX响应以及如何更新使用Ajax响应这个大表？

来源

2012-02-28 rh4games

您可以为表建立完整的标记并将其发送回客户端？然后，您将删除现有表格，并将从服务器发送的“

...

”字符串放到页面中。不知道Rails，但我已经在JSP中完成了。否则，你可以使用一个数据表插件（如YUI DataTable），它通常支持ajax加载和更新。 – 2012-02-28 05:04:23

你确定你从ajax得到回应？如果是的话，你如何获得轨道变量？ – 2012-02-28 05:04:52

@dku。rajkumar：是的，我很确定;例如，“@ new_r0c0_value”是在我称为“update_values”的控制器方法内计算的，并且对于同一表单中的所有其他字段可以正常工作 – rh4games 2012-02-28 05:14:56

如果你把一个id放在桌子上的标签本身，就可以得到表中的所有细胞进入一个这样的数组：

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

然后，您将拥有所有的td元素的数组中的表您可以循环和更新。

在一些浏览器，它可以表现得更好，只是删除整个表，并构建一个新的一个新的数据，而不是单独改变所有单元格。问题在于，由于表格可以有动态布局，因此每次更改单元格时，浏览器可能无法有效地中继表格。

来源

2012-02-28 05:13:49 jfriend00

为什么不循环遍历每一行呢？ – AlxVallejo 2012-12-26 16:49:12

@AlxVallejo - 我不明白你的问题。 OP询问如何更新表格中的所有单元格，并且这个答案建议如何获取所有单元格的列表，以便人们可以遍历它们。有很多其他方式可以做到，但这很简单，很有效。 – jfriend00 2012-12-26 18:33:51

啊，你说得对。这是tl;博士。我想在大多数情况下，你会从数据库调用，以便一次遍历一行属性而不是所有单元格更容易。 – AlxVallejo 2012-12-27 00:08:52

尝试此..

如果可以构造这样 [[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>

来源

2012-02-28 05:50:52 Vadivelan

谢谢Vadivelan。我所缺少的是从AJAX响应更新表的js部分，而不是如何在服务器上首次构建它。 – rh4games 2012-02-28 06:03:10

是的，你仍然可以在js中实现这一点。将上述表格内容放在部分文件中。在你的ajax动作中，构造数组并使用'code'page.replace_html'elementID'，：partial => file_name'code' – Vadivelan 2012-02-29 10:59:01

如果使用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个孩子与索引并突出显示。

来源

2012-02-28 07:37:55

如何从AJAX响应更新大型表格？

回答

相关问题