javascript - jquery Grid 支持什么连续更新流(json)

Question

由于这是一篇很大的文章，这里有一个简短的摘要(如果您想回答，请阅读漏洞帖子):

现已实现:

• 网站提取大量 json(完整数据集每次约 30kb，已压缩)
• 将数据呈现为 html 表格客户端
• 流量过多
• 渲染时间太长

链接到以下网站之一:Sample

我们已经实现了部分数据检索，我们现在需要的是找到一个解决方案:

• 仅渲染更改
• 刷新更新的单元格

问题:有哪些网格或其他解决方案可以实现这一目标？

更新:客户端希望立即查看所有可用数据，无分页。

<小时/>

完整描述:

在我们的应用程序中，我们需要在网格中显示一定数量的行(~300-1000)。访问者可以通过单击标题来排序(客户端)。此外，每行包含多个链接，这些链接可使用 colorbox 打开一个 iframe。

数据

• 每 30 秒刷新一次(来自服务器的 json)
• 由多个字段组成(字符串、整数和小数)。
• 只有小数点发生变化，这意味着链接(颜色框)也保持不变
• 并非所有数据都会显示，部分数据仅用于客户端排序

目前，我们正在使用jTemplates、tablesorter 和 colorbox 的组合将整个 json 数据集渲染为 html 表。目前的流程是:

1. 从服务器检索数据(完整数据集)
2. 使用 jTemplates 将数据渲染为 html
3. 初始化表格的颜色框
4. 初始化表的表排序器
5. 从#1 重新开始

上述解决方案有效，但存在一些问题:

• 获取大量重复数据转入。这加起来相当快速(>5GB/天)
• 数据的渲染需要相当长的时间一段时间(~300ms)，在移动设备上情况更糟
• 每次重新初始化 colorbox 和 tablesorter 也需要相当长的时间(约 400 毫秒)，在移动设备上情况更糟

所以我们的目标是通过 json仅传输更新的数据和新数据。每行都有一个简单的唯一键(int)，因此可以轻松识别它们。
此外，我们希望闪烁更新或新插入的数据的容器，以通知用户发生了更改。

我们想要的流程是:

1. 从服务器获取 json 数据(全套)
2. 渲染网格并进行排序初始化颜色框链接
3. 从服务器获取 json 数据(仅更新值和新行)
4. 更新网格(仅更改值和新行)<- 更新后还刷新值容器
5. 从#3重新开始

因此，我们正在寻找的网格需要支持加载数据作为一个洞，并且还仅加载更新的值。

完整的数据集如下所示:

{
    [ 
        { 
        "key":1, 
        "StaticProperty":"value3",
        "PropertyOne":2.85 ,
        "PropertyTwo":1.99
        },
        {
        "key":2, 
        "StaticProperty":"value2",
        "PropertyOne":5.66,
        "PropertyTwo":7.36
        },
        {
        "key":3, 
        "StaticProperty":"value3",
        "PropertyOne":1.78,
        "PropertyTwo":9.31
        },
        {
        "key":4, 
        "StaticProperty":"value4",
        "PropertyOne":1.78,
        "PropertyTwo":9.31
        },
        {
        "key":5, 
        "StaticProperty":"value5",
        "PropertyOne":1.78,
        "PropertyTwo":9.31
        }
    ]
};  

更新数据集看起来像(记住它只包含更改的值):

{
    "updates" : [ 
        { 
        "key":1,
        "PropertyOne":4.88
        },
        {
        "key":2,
        "PropertyOne":2.77,
        "PropertyTwo":3.88
        },
        {
        "key":6,
        "StaticProperty":"value6",
        "PropertyOne":7.23,
        "PropertyTwo":8.42
        } 
    ],
    "deletes" : [ 4, 5 ]
}; 

如您所见，更新可以包含:

• 部分更新(id #1)
• 每行多次更新(id #2)
• 现有行(id #3)没有更新
• 已删除行的 ID 作为简单数组(id #4、#5)
• 新行(id #6)

我们需要的是一个网格或其他建议，使我们能够处理所有提到的操作。
我们已经有一种方法可以确保数据永远不会损坏(已经在服务器和客户端上进行了处理)，因此它实际上只是关于显示数据并保持显示最新.

非常感谢所有的意见。

Answer 1

只是一个想法...您已经使用 jquery 和 json...您考虑过 ajax 吗？由于您只执行更新，因此您可以使用 jquery 中的 json 在表中找到更新的 id，并仅更新这些行。

这将极大地帮助您的渲染和流量。设置 jquery 在计时器上运行 ajax，并设置仅提取更新行的背景对象。

我个人喜欢中继器，但这是个人偏好...您可以设置页面加载来加载数据集的缓存版本，然后允许 jquery 接管并异步拉回数据。