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

【问题标题】：What jquery Grid supports a continuous stream of updates (json)什么 jquery Grid 支持连续更新流（json）
【发布时间】：2011-05-04 15:17:30
【问题描述】：

由于这是一个巨大的帖子，这里是一个简短的摘要（如果你想回答，请阅读漏洞帖子）：

现已实施：

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

链接到其中一个网站：Sample

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

只渲染更改
Flash 更新单元格

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

UPDATE：客户端希望一次查看所有可用数据，不分页。

完整说明：

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

数据

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

目前我们正在使用 jTemplates、tablesorter 和 colorbox 的组合来将整个 json 数据集渲染到一个 html 表格中。目前的流程是：

从服务器检索数据（完整数据集）
使用 jTemplates 将数据呈现为 html
初始化表格的颜色框
为表格初始化 tablesorter
从 #1 重新开始

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

获得大量重复数据转移。这加起来相当快速（>5GB/天）
数据的渲染需要相当长的时间一段时间（约 300 毫秒），在手机上更糟
每次重新初始化颜色框和表格排序器也需要相当长的时间（约 400 毫秒），在移动设备上也更糟

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

我们想到的流程是：

从服务器获取json数据（全套）
使用排序和渲染网格初始化彩盒链接
从服务器获取 json 数据（仅更新值和新行）
更新网格（仅更改值和新行）flash 值容器
从 #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）

我们需要一个网格或其他能让我们能够处理所有提到的操作的建议。
我们已经有办法确保数据永远不会损坏（已经在服务器和客户端处理），所以它真的只是关于显示数据并保持显示最新。

非常感谢所有输入。

【问题讨论】：

标签： javascript jquery json sorting grid

【解决方案1】：

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

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

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

【讨论】：

谢谢小费。这实际上已经发生了，我们正在使用 jquery 的 ajax 功能，问题是更多地更新 ui 中的值和渲染速度。我宁愿使用现有的组件也不愿步行;)
我有一个我正在处理的应用程序的一部分，它可以完整地呈现一个中继器，然后我返回（单击功能）并且必须从 Web 服务源更新特定部分......它需要永远，如果我尝试一次完成所有事情，这就是我提出 ajax 的原因......我喜欢这些东西。
您好，对于延迟响应，抱歉，正如我之前所说，我们已经使用 ajax 请求从服务器中提取数据。我们要避免的是手动更新 DOM 中的值。显然，似乎没有这样的组件:(

【解决方案2】：

我个人最喜欢的基于 jQuery 的 Grid 插件是 jQuery flexigrid plugin。

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

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

【讨论】：

据我所知，它不支持仅根据更改进行更新，但它需要初始化整个数据集（只有第一个 json 请求会返回整个数据集，之后只是更改）。我错过了什么吗？
一开始就肯定丢弃整个数据集总是会非常昂贵吗？为什么不让 flexigrid 在页面加载时启动，然后通过快速 ajax / json 请求请求当前“页面”价值的数据。这将非常便宜，因为您每次只显示当前视图子集的结果。
你是对的，但这不是客户想要的。该网站的整个想法是在不分页的情况下概述所有可用数据，但我应该更新问题以反映这一点。
在服务器请求期间向客户端提供 XML 怎么样，将其隐藏在隐藏元素中。然后在加载时，使用整个 XML 集初始化 flexigrid。之后有任何更改，使用 jQuery XML 函数更新 XML 并使用最新版本的 XML 重置 flexigrid？
抱歉这么晚才回来。 Xml 的开销很大，我们已经通过使用 gzipped json 每天提供 20GB 的服务，只传输更改的一个原因是尽量减少流量。一旦填充了 flexgrid，您的建议几乎是手动更新 dom 中的数据。首先，这是大量的手动编码（我们希望避免），其次，如果我只是更新数据，我不知道疼痛会发生什么，可能它仍会包含旧值，因此不再正常工作。

【解决方案3】：

结束这个问题：
否，没有这样的网格。我们必须从头开始构建它。
我会尽快将这个问题/答案的 url 更新到已完成的网格中，尽管这样可以让其他人抢占先机。

【讨论】：