Question

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

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

然而，有数千行，并且可能由于它的大小，ui会在表更新时冻结。此外，这个过程看起来有点hacky - 直接操作DOM似乎应该在库中完成。我也在考虑实施分页以解决闪烁问题，但同样，我觉得我正在解决一个普遍的问题来解决我的问题。

这里做什么是正确的？这项任务似乎很常见。有没有更好的方法来解决这个问题，而不仅仅是攻击DOM，或者这就是你应该做的事情？

Answer 1

您可以使用SlickGrid之类的内容。

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

以下是基于one基本示例的一大块代码：

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数组上的字段值匹配。

包含数千行的HTML表

1 个答案: