什么是带有标签的好的 JavaScript 网格？答案

【问题标题】：What's a good JavaScript grid with tabs?什么是带有标签的好的 JavaScript 网格？
【发布时间】：2009-09-29 21:49:30
【问题描述】：

我有 3 组表格数据，我想用 ASP.NET MVC 中的 JavaScript 框架显示。我知道我可以在选项卡中嵌入一个单独的网格，但这似乎效率低下，尤其是在涉及大型数据集时，因为我想会创建 3 个单独的网格。我还没有找到一个 JavaScript 数据网格来模拟电子表格对多个选项卡的作用。不过，这个来自 YUI 的例子可能很接近：

http://developer.yahoo.com/yui/examples/datatable/dt_dynamicfilter_source.html

我对 jQuery 有点熟悉，但愿意切换到任何使这变得容易的框架。我真的不需要编辑数据。有什么建议吗？

编辑：我的意思不是关于 jQuery。正如其中一个 cmets 所建议的，也许有关我的场景的一些细节会有所帮助。我想显示来自包含数千条记录的订购系统的表格数据。我想要 3 个标签：

系统中输入的所有尚未付款的订单。
来自特定供应商的所有订单。
所有已付款的订单。

由于每个类别都有数千行，我只想在用户开始分页时加载数据。

我认为拥有 3 个选项卡和 3 个单独的网格（每个选项卡内有一个）不会有性能。我实际上并没有尝试过，所以我可能对过早优化感到内疚。我正在寻找一个内置选项卡支持的网格。我不认为 jQuery 有一个。也许是 ExtJS？

【问题讨论】：

另见stackoverflow.com/questions/159025/jquery-grid-recommendations
@罗伯特。谢谢。是的，我看到了。不过，似乎没有任何带有内置选项卡的 jQuery 网格。

标签： javascript jquery asp.net-mvc extjs yui

【解决方案1】：

由于您使用 Ext JS 标记了它，我会提到使用 Ext JS 将网格呈现到选项卡中非常简单。它还支持延迟加载/渲染，以便最初仅加载第一个选项卡/网格，然后在首次访问时加载其他选项卡/网格。在不知道您的具体要求的情况下，很难进一步评论。

EDIT（基于已编辑的问题）：Ext 网格不直接支持制表符，但它们可以嵌入到 TabPanel 中，正如我提到的那样，效果相同。但是，根据您的描述，对我来说这听起来更像是一个过滤场景。当只有一个网格可见时，我看不出有多个网格的开销有什么意义，每个网格的目的都是显示相同数据的特定视图（即过滤器）。我只需要一个带有工具栏的网格或提供您在过滤器之间切换的其他方法，并使用 Ext 的内置商店过滤/查询来按需创建您的视图。 Ext 网格支持开箱即用的分页（客户端或服务器，在您的情况下，它将是数千条记录的服务器）。还有一个非常流行的插件叫做LiveGrid，它提供了大型数据集的虚拟滚动分页。

我不一定提倡 Ext 胜过任何其他框架——我只是碰巧最熟悉它，我认为它可以很好地解决您的问题。我建议您自己尝试一下以确定。

【讨论】：

如果您使用 ExtJS Grids，希望没有人使用屏幕阅读器阅读您的页面。 EXTJS Grid 视觉上很漂亮，功能也很强大，但底层的 HTML 令人恐惧。
@bmoeskau：我在原始帖子中添加了有关我的要求的详细信息。
是的，Ext 是唯一使用复杂 html 来呈现小部件的 RIA 框架。很棒的一点。

【解决方案2】：

jQuery Grid 有点像人们经常使用的东西。我用过，挺好用的。

jqGrid Link

我不会用三个选项卡绘制网格。我会使用带有选项卡控件的单个网格，然后根据需要通过 jQuery 加载数据。

或者可能有三个 PartialView，您可以在点击选项卡时动态加载它们。

【讨论】：

您将失去失去标签的一大好处，即在您切换标签时不必重新加载数据。
确实如此，但您可以在切换到选项卡时加载数据，下次切换时只需显示它。这样你只加载用户请求的数据。每次切换选项卡、检查更改并仅加载更改（如果有）时，我实际上都会执行 jQuery 回发。我仍然会使用局部视图方法，因为它允许您更改一小部分代码，而不是在一个网格中执行所有选项卡时可能是一大块代码。

【解决方案3】：

你也可以使用dhtmlx grid.

【讨论】：

【解决方案4】：

您可以使用JS tab object 创建标签。

并使用javascript grid framework 创建网格并将数据填充到网格中。

【讨论】：