2012-09-11 39 views
4

我试图找到一种方法或插件,将能够处理大量的数据(〜10,000行),并创建一个组合框/下拉,可以通过键入过滤,或者能够一次滚动浏览所有记录。过滤下拉大型数据集

我试过看着不同的插件以及写我自己的。这里有很多很棒的选项,但是一旦数据集变大,这些选项的性能就会迅速下降。我一直在玩chosen。然而,我担心搜索性能是因为有10,000条记录导致输入延迟,并且如果尝试输入速度太快,可能会锁定浏览器。同时检查出所选的github页面,它似乎并不像近期有太多的发展。

浏览器要求是IE 7+(IE浏览器真的是javascript性能差的最大问题)& FF(Chrome和Safari是红利)。

这是一个jsfiddle有点模仿将在我的情况下使用的数据的类型。我还添加了所选的插件,以便您可以看到它的表现。

+0

没有答案,但也许你需要重新考虑你的用户界面。用户是否真的需要/需要查看10K项目?你能把这些物品分成几组吗?然后,当用户选择一个组,使用AJAX填充第二个框。只是一个想法。 –

+0

查看我的评论KuH的答案。对于这个特定的用例,它不会分成很多组,因此也就是过滤选项。我都希望通过不同的方式获得解决方案。 –

+0

然后你可以使用分页。填写名单前100左右。添加一个“下一页”按钮,当点击时使用Ajax获取下一个100等。 –

回答

2

你可能想看看Datatables作为替代。这真的很漂亮 - 你可以有一个很好的表格布局(你指的是“行”,所以我假设它是表格数据而不是单个列),过滤是“智能/原子” - 例如如果您在搜索框中输入“红色汽车”,它会为您提供所有包含红色和汽车的行,但不一定在一起。

它也有各种各样的插件 - 包括使用滑块的paginator,对大页数有用。我已经运行了2000多条记录,只要你的电脑有足够的内存,它就非常快。它支持通过AJAX进行动态分页。

它也实现了“无限滚动”,有几个参数变化和一个AJAX调用或两个。

+0

在现实中,没有一个插件或方法来我的问题。它更像是实现它的方法的组合。无限滚动和搜索的结合就是答案。数据表将是实现这一目标的一种方式。可悲的是我被拉到更高优先级的项目上,所以我从来没有机会使其工作。 –

1

你确定把这么大量的数据加载到客户端并在那里处理它是个好主意吗?像大多数开发人员通常所做的那样,这样做会不会更好 - 在服务器上,通过ajax处理输入并仅加载所需的数据?

现在的JS更快,但并不那么快。

+0

我肯定会愿意实现一些东西,让他们在浏览或搜索时都有可用的所有记录。几乎像一个无限的滚动表满足过滤下拉 –