jQuery 可滚动、可排序、可过滤的表格

Posted 2023-05-08

【中文标题】jQuery 可滚动、可排序、可过滤的表格

【英文标题】：jQuery Scrollable, Sortable, Filterable table

【发布时间】：2010-09-16 14:18:29

【问题描述】：

我希望利用 jQuery 来处理我们对不同大小的数据表的一些非常常见的请求：滚动、排序和动态过滤。

过去我处理滚动的方法是拥有两个具有固定宽度列的独立表格，以及用于“实际”滚动的关联 div 容器。但是，此方法不适用于我遇到的任何基于 jQuery 的排序表扩展（到目前为止，tablesorter 是我最喜欢的），因为它们希望将所有内容都放在一个表中。 对于过滤，他们请求类似于 Excel 和 SharePoint 列表的方式（基本上所有列值都列在下拉列表中，允许用户选择/取消选择它们）。虽然听起来可能，但我还没有看到类似的东西。 另一个相关的不错的功能是能够“冻结”一列以进行水平滚动。

理想情况下，我想要一个现有的扩展，但如果没有，我也会感谢任何 jQuery 专家关于如何最好地实现它的建议。我目前的想法是深入研究 tablesorter 并根据需要对其进行扩展/更新。

为了希望让事情保持专注，分页不是一种选择（以及任何基于服务器的东西，就此而言）。

更新： 到目前为止，我确实很欣赏这些答案，但到目前为止给出的选项都没有涉及过滤方面（也就是说，我必须承认 jqGrid 对于我未来的一些项目看起来非常好）。与此同时，我将致力于定制过滤解决方案；如果成功我会再次更新。

【参考方案1】：

我在自己寻找可排序表格插件时遇到了这个问题；我对任何建议的小部件都没有印象，但后来我发现了DataTables，我印象非常深刻。我建议检查一下。

【参考方案2】：

也许这个优秀的插件可以做到：

Demo page

它叫jQGrid，这里是项目页面： http://plugins.jquery.com/project/jqGrid

【参考方案3】：

我鼓励您尝试Flexigrid。

它有很多很棒的功能，我个人认为它看起来比jqGrid更专业。

它没有您要求的某些功能，但我认为这可能是一个好的开始。如果您可以将其中一些功能添加到代码库中，那就太好了。

如果您使用 c# 编码，那么我发布了一篇关于如何使用 LINQ to Reflection to bind JSON to the Flexigrid 的博客文章...如果您使用其他语言，您可以在 Flexigrid's Website 和 Google Group 页面上找到其他示例。

【讨论】：

本网站链接失效；这个项目页面是同一个“Flexigrid”吗？ code.google.com/p/flexigrid

【参考方案4】：

一个简单的jQuery Scrollable Table Plugin

【参考方案5】：

正如我在更新中提到的，我最终使用了自定义过滤扩展（不幸的是，封闭源代码）。我最近开始使用SlickGrid，现在它是我的首选网格。

【讨论】：

我已经切换到 DataTables（现在接受的答案）。对于我当前的数据集，它运行良好，并且不难让它在我的 UI 中看起来不错。

【参考方案6】：

我想添加 Laravel 风格的 DataTables（GitHub、jquery DataTables API）——如果你已经在使用 php/Laravel，那就完美了。

额外，koalyptus/TableFilter 另一个自定义过滤表（实际上是我的最爱）。