jquery Grid 支持什么连续更新流（json）

Question

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

现已实施：

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

链接到以下站点之一：示例

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

• 只渲染
• Flash 更新的单元格

的变化问题：什么网格或其他解决方案存在来实现这一点吗？

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

---

完整描述：

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

数据

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

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

1. 从服务器检索数据（完整数据集）
2. 使用 jTemplates 将数据渲染为 html
3. 初始化表的 colorbox
4. 初始化表的 tablesorter
5. 从 #1 重新开始

上面的解决方案有效，但存在一些问题：

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

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

我们想到的流程是：

1. 从服务器获取 json 数据（全套）
2. 渲染网格并进行排序和 初始化颜色框链接
3. 从服务器获取 json 数据（仅更新的值和新行）
4. 更新网格（仅更改的值和新行）<- 还flash< /strong> 更新后的值容器
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）

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

非常感谢所有的意见。

Answer 1

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

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

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

Answer 2

我个人最喜欢的基于 jQuery 的网格插件是 jQuery flexigrid 插件。

它的功能非常丰富。您可以指定是否在页面加载时加载表记录，或者指定一个返回 XML / JSON 的好函数，然后自动输出。我个人在 ASP .Net 应用程序中多次使用它来调用支持的 Web 服务，然后每次都呈现结果。

根据您的请求，它没有的主要功能是刷新计时器，但您可以简单地自己启动一个计时器，然后调用网格的数据刷新方法，该方法每次都会触发一个新的 JSON 请求。

Answer 3

结束这个问题：
NO，没有这样的网格。我们必须从头开始构建它。
一旦完成，我将使用完整网格的 url 更新此问题/答案，以便为其他人提供先机。