我有一个html文件,其中包含需要在单个html文件中的10000个列表项按类别排序,例如按ABC排序,并不是所有的都需要显示。
每次只有500(所以其他的都隐藏了)。
有什么方法可以有效地重新排列列表呢?
Java脚本?css呢?
你可以用它来排序你的列表:
var list = document.getElementById("myList");
var listItems = [].map.call(list.getElementsByTagName("li"), function(item) {
return { text: text(item), element: item };
});
function sortList() {
var frag = document.createDocumentFragment();
listItems = listItems.sort(function(a, b) {
return a.text < b.text ? -1 : b.text < a.text ? 1 : 0;
});
listItems.forEach(function (item) {
frag.appendChild(item.element);
});
list.innerHTML = "";
list.appendChild(frag);
}
function text(el) {
var s = el.innerText;
if (!s && s != "") {
s = el.textContent || "";
}
return s.toLowerCase();
}
工作演示:http://jsfiddle.net/4bm57/6/
过滤列表:
function filterList() {
var frag = document.createDocumentFragment();
listItems.forEach(function (item) {
if ([filter criteria code here]) {
frag.appendChild(item.element);
}
});
list.innerHTML = "";
list.appendChild(frag);
}
这段代码使用了一些旧浏览器中不可用的Array方法。要使此代码在IE8或更早版本中工作,请参阅Array.map()
和Array.forEach()
的兼容性部分。
带分页的数据表是可行的。
下面的例子是一个JSF组件,但我认为它已经足够让你了解这个概念了。
示例: 处理大数据的数据表
我建议你看看KnockoutJs。它有你想要的所有功能。
- 设计用于处理客户端的大量数据。
- 通过使用不同的模板来显示数据,您可以轻松地动态创建完全不同格式的网格。参见http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html。
- 您可以轻松实现实时搜索。参见http://jsfiddle.net/rniemeyer/cCBqJ/。使用这个示例,您还可以实现自定义过滤,只显示感兴趣的数据。
- 你可以实现任何你想要的动态排序。请参阅http://jsfiddle.net/rniemeyer/93Z8N/获取一个简单的示例。您还可以将过滤器的输出链接到sort例程中。
- 您可以通过在排序函数之后链接分页过滤器轻松实现分页。
所以你可以很容易地切片和切片,并显示任何你想要的数据。
缺点是目前还没有一个开源项目支持带有排序、过滤和客户端分页的通用网格。有各种不同的部分实现。最好的信息在http://www.knockmeout.net/和https://groups.google.com/forum/#!forum/knockoutjs。
我目前在我当前的项目中使用上述所有功能。knockoutj确实有一个学习曲线。但是我发现这是最好的数据展示方式