Question

测试了以下网格

Datatables
Angular UI网格
Slick Grid
自举

观察：

数据表和Bootstrap网格非常慢
光滑网格截至目前尚未启用
Angular UI网格不支持或拥有所有导出选项

具有以下功能的最快数据网格是什么

搜索
分页
html示例
导出选项 - csv，复制到剪贴板，png，word，excel，csv，png，xml

Answer 1

我当前最喜欢的表库是Bootstrap-Table

它具有您寻找的所有功能并且运行良好。

HTML Example, Search, Pagination
Export Options

要在10k +记录上实现正常的加载时间，您很可能需要使用AJAX and/or Pagination。

这是一个显示5000个结果正常工作的片段：

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
</head>

<body>
  <table data-toggle="table"
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-show-export="true"
       data-minimum-count-columns="2"
       data-show-pagination-switch="true"
       data-pagination="true"
       data-id-field="id"
       data-page-list="[10, 25, 50, 100, ALL]"
       data-show-footer="false"
       data-side-pagination="client"
       data-url="https://jsonplaceholder.typicode.com/photos">
    <thead>
      <tr>
        <th data-field="id">Id</th>
        <th data-field="title">Title</th>
        <th data-field="url">URL</th>
        <th data-field="thumbnailUrl">Thumbnail URL</th>
      </tr>
    </thead>
</body>

</html>

所以这里发生了一些改善绩效的事情：

由于数据更自然地流向图书馆，我们得到了一个很好的“加载......”，这使得用户内心充满热情和挑剔。如果不仅仅是因为它正在向用户提供反馈。因此，我们愿意再等几秒钟。
我们正在从包含数据的HTML表格切换到JSON对象。

当使用HTML作为数据源时，页面必须完全呈现数据的过于冗长的表示（这会阻止JavaScript表单加载）。然后，库加载并开始解析此数据（5,000行X 10列= 50,000个元素）。然后库必须将其逻辑应用于DOM。根据代码的编写方式，这将意味着处理所有结果3x。

OR

使用JSON（JavaScript Object Notation）时，HTML页面非常轻，因此它立即完成渲染。此外，数据采用JavaScript的本机语言，因此可直接读入JavaScript对象。该库创建一个对象并将其绑定到表的内容。这意味着需要为表添加1个对象才能开始渲染。

基本上我们正在为结果的渲染添加并行性。因此，所有3个步骤仍在发生，但在前一种情况下，每个步骤都必须等待下一步。而在后一种情况下，步骤是并行发生的。而且因为我们觉得它一旦完成加载就会完成加载，所以感觉要快得多。

根据您的请求添加了导出，但实际的库错误可能是代码段工具的限制。

Answer 2

不确定您是否可以使用React，但是您是否已检出https://react-table.js.org或https://facebook.github.io/fixed-data-table？它们似乎都符合列表中的所有内容，除了用于导出。

导出到不同的格式很难一般，因此https://www.npmjs.com上有许多不同的项目专门处理将数据导出为不同的格式。

祝你好运！

Answer 3

普通客户端的10K数据非常大。与哪个js组件无关。 DataTables BootStrap等非常慢，因为客户端ram不足以显示10k数据。

静态数据网格 - 具有搜索，分页，导出选项的10K记录

3 个答案: