在制表符网格中读取分块 JSON 流答案

【问题标题】：Read Chunked JSON Stream in Tabulator Grid在制表符网格中读取分块 JSON 流
【发布时间】：2020-10-24 14:53:48
【问题描述】：

我有一个 Tabulator Grid，并使用 Ebay 的 jsonpipe 库以分块格式从我的服务器加载 JSON，因此即使结果非常大，我也可以立即开始填充我的数据网格。将这类数据放入 Tabulator 的方法是

table.addRow(row, true);

这很好用，但是您必须为每条记录添加一个 setTimeout，否则用户会在几秒钟内什么也看不到。但是 setTimeout 会减慢速度 - 即使非常小 - 甚至从本地文件加载也需要很长时间才能加载 800 条记录。

有没有人想出一种直接在 Tabulator 中读取分块 JSON 的方法？他们现有的 Ajax 方法不包括流式传输/分块换行编码的 JSON。

我想补充一点，数据已经从我的服务器分块了——它首先是通过流发送的，Ajax 不需要像设置使用时那样重复请求

ajaxProgressiveLoad:"load", //sequentially load all data into the table

【问题讨论】：

标签： tabulator chunked-encoding chunked ndjson

【解决方案1】：

虽然这不是正确的技术解决方案，但它几乎可以立即加载我的数据。我摆脱了（可怕的）setTimeout，并将其添加到我的 jsonpipe 成功函数中。变量 arr 和 count 必须定义在执行请求的 fn 的顶部。

    if (count == 50) {
        table.addData(arr, true);
        count = 0;
        arr = [];
    }

我对它进行了一点操作，一次 50 个似乎产生了最快的结果，我还没有用服务器端检查这个，只有本地文件，所以如果需要调整，我会更新。远比只为每个块使用 addRow 好得多。

【讨论】：

【解决方案2】：

Tabulator 内置了 Progessive Ajax 加载功能，可以像分页一样工作，允许您以块的形式提取数据

var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
    ajaxProgressiveLoad:"load", //sequentially load all data into the table
});

您还可以使用滚动渐进式加载，它只在用户滚动到数据时加载数据：

var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
    ajaxProgressiveLoad:"scroll", //load data into the table as the user scrolls
});

详情请见Progressive Data Loading Documentation

【讨论】：

我的数据已经从服务器分块了，我认为这是问题所在。