具有数千行的HTML表 [英] HTML Table with thousands of rows

问题描述

我有一台服务器，它将提供json中的对象列表，我想将它们显示在客户端的表中。

I have a server that will supply a list of objects in json, and I would like to display them in a table on the client side.

我的本​​能我从服务器获得结果后编辑DOM。从json创建整个表DOM元素，然后在包含该表的元素上调用replaceChild。

My initial instinct was to edit the DOM after I got the results from the server. Create the entire table DOM element from the json, and then call replaceChild on the element that contains the table.

但是，有成千上万的行，可能是由于其行大小，用户界面在更新表时冻结。此外，此过程似乎有些棘手-直接操作DOM似乎应该在库中完成。我也在考虑实现分页以解决闪烁的问题，但同样，感觉就像我在解决一个通用问题以解决我的特定问题。

However, there are thousands of rows, and perhaps due to its size, the ui freezes as the table is being updated. Furthermore, this process seems a bit hacky -- manipulating the DOM directly seems like it should be done in a library. I'm also thinking of implementing pagination to address the flickering issue, but again, it feels like I'm solving a general problem to address my specific one.

会怎样在这里做正确的事吗？该任务似乎很普通。除了破解DOM之外，还有更好的方法来解决这个问题吗？或者这就是您应该做的事情？

What would be the right thing to do here? The task seems like it would be common enough. Are there better ways to go about this than just hacking the DOM, or is that just what you're supposed to do?

推荐答案

您可以使用类似 SlickGrid 之类的东西。

You could use something like SlickGrid.

通过应用他们称为自适应虚拟滚动的东西，它具有非常快的渲染速度（非常类似于@Grim的评论）。

It has a very fast rendering speed by applying something they call adaptive virtual scrolling (very much like what @Grim commented I think).

以下是基于其中一个基本示例：

Here's a chunk of code based on one of their basic examples:

HTML：

<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:600px;height:500px;"></div>
    </td>
  </tr>
</table>

JS：

  var grid;
  var columns = [
    {id: "title",    name: "Title",    field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "start",    name: "Start",    field: "start"},
    {id: "finish",   name: "Finish",   field: "finish"}
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };

  $(function () {
    var data = getYourJSONDataArray();
    grid = new Slick.Grid("#myGrid", data, columns, options);
  });

JSON对象上的键必须与columns数组上的字段值匹配。

The keys on your JSON objects have to match the field values on the columns array.

这篇关于具有数千行的HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！