Javascript 什么jquery网格支持连续更新流（json）

由于这是一篇巨大的文章，这里有一个简短的摘要（如果你想回答，请阅读这篇文章）：

现已实施：

• 网站获取了大量json（每次约30kb的完整数据集，已经压缩）
• 将数据呈现为html表客户端
• 交通太多
• 渲染时间太长

链接到其中一个站点：

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

• 只渲染更改
• 闪存更新单元

问题：有什么网格或其他解决方案可以实现这一点？

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

---

详细说明：

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

数据

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

目前，我们正在使用jTemplates、tablesorter和colorbox的组合来将整个json数据集呈现到一个html表中。当前流量为：

从服务器检索数据（完整数据集）

使用jTemplates将数据呈现为html

初始化表的colorbox

初始化表的tablesorter

从#1开始

上述解决方案可行，但存在一些问题：

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

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

我们考虑的流程是：

从服务器获取json数据（完整集）

使用排序和 初始化色盒链接

从服务器获取json数据（仅更新值和新行）

---

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

这将有助于你的渲染和巨大的流量。将jquery设置为在计时器上运行ajax，并使用一个只提取更新行的set background对象

---

我个人喜欢复读，但这是我个人的偏好。。。您可以将页面加载设置为加载数据集的缓存版本，然后允许jquery异步接收和回调数据。

我个人最喜欢的基于jquery的网格插件是

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

---

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

要结束这个问题：
不，没有这样的网格。我们必须从头开始建造它。

---

我会在问题/答案完成后立即将其url更新到完整的网格中，以使其他人领先。

Thx获取提示。这实际上已经发生了，我们正在使用jquery的ajax功能，问题是要更多地更新ui中的值和渲染速度。我宁愿使用现有的组件，也不愿步行使用；）我有一个应用程序的一部分，我的工作是完整地呈现一个repeater，然后我返回（单击函数），必须从web服务源更新特定的部分。。。如果我想一次完成所有的工作，那就要花很长时间，这就是为什么我提出了ajax。。。我喜欢这些东西。嗨，sry的反应太晚了，正如我之前所说的，我们已经在使用ajax请求从服务器中提取数据了。我们想要避免的是手动更新DOM中的值。显然，似乎没有这样的组件：（据我所知，它不支持仅仅基于更改进行更新，但它需要初始化整个数据集（只有第一个json请求将返回整个数据集，之后只是更改）.我错过了什么吗？首先，扔掉整个数据集肯定会非常昂贵？为什么不让FlexGrid在页面加载时启动，然后请求当前“页面”通过快速ajax/json请求获得大量数据。这将非常便宜，因为您每次只显示当前视图子集的结果。您是对的，但这不是客户所希望的。网站的整个理念是在不分页的情况下提供所有可用数据的概览，我应该更新问题以反映在服务器请求期间，如何将XML服务到客户端，将其隐藏在内部

{
    [ 
        { 
        "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 ]
};