我有一个从FullCalendar
动态填充的表格。
问题是FullCalendar
并不关心其原始顺序。
表格如下:
<table id="caltbl">
<thead>
<tr> <th> </th> <th> Date </th> <th> hours </th> ... </tr>
</thead>
<tbody>
<tr> <td class="sortnr">1</td> <td></td> ... </tr>
<tr> <td class="sortnr">3</td> <td></td> ... </tr>
<tr> <td class="sortnr">2</td> <td></td> ... </tr>
<tr> <td class="sortnr">4</td> <td></td> ... </tr>
</tbody>
</table>
每行的第一行包含表应该排序的数字。
我有这个代码来对它进行排序:
var rows = $('#caltbl > tbody').children('tr').detach();
for (var counter = 1; counter<=rows.length; counter++) {
$(rows).each(function(index) {
if ($(this).find(".sortnr").text()==counter){
$('#caltbl > tbody:last').append($(this));
}
});
}
这在Firefox中运行良好,但在Internet Explorer中引起了我的一个主要问题,因为有500多个项目并且它会挂起。我可以添加setTimeout
,但这无法解决真正的问题。 排序很慢。什么是更快的排序方式?
而不是必须从<table>
html开始,因为我说它会动态填充,所以我有一个包含html的Array
。每<tr>
个1项(未分类)
答案 0 :(得分:50)
小提琴:http://jsfiddle.net/qNwDe/
我编写了一个高效的跨浏览器方法来对表中的行进行排序。双循环中的多个JQuery选择器导致严重的性能问题(正如您所注意到的那样),因此我摆脱了JQuery。
我的功能的另一个优点是它不介意丢失索引号。我现在指的是每一行的第一个单元格,而不是按类名获取元素。如果你想通过classname引用,我会改变我的功能:
function sortTable(){
var tbl = document.getElementById("caltbl").tBodies[0];
var store = [];
for(var i=0, len=tbl.rows.length; i<len; i++){
var row = tbl.rows[i];
var sortnr = parseFloat(row.cells[0].textContent || row.cells[0].innerText);
if(!isNaN(sortnr)) store.push([sortnr, row]);
}
store.sort(function(x,y){
return x[0] - y[0];
});
for(var i=0, len=store.length; i<len; i++){
tbl.appendChild(store[i][1]);
}
store = null;
}
只要您想对表格进行排序,请致电sortTable()
。
答案 1 :(得分:7)
尝试这样的方法: http://jsfiddle.net/qh6JE/
var rows = $('#caltbl > tbody').children('tr').get(); // creates a JS array of DOM elements
rows.sort(function(a, b) { // use a custom sort function
var anum = parseInt($(a).find(".sortnr").text(), 10);
var bnum = parseInt($(b).find(".sortnr").text(), 10);
return anum-bnum;
});
for (var i = 0; i < rows.length; i++) { // .append() will move them for you
$('#caltbl > tbody').append(rows[i]);
}
答案 2 :(得分:5)
我认为在你的情况下有太多的循环。使用500个项目,您将循环500 * 500 = 250000次。没有那么多浏览器会知道如何做到这一点。
我建议使用javascript的原生array.sort()
方法根据自定义“比较功能”进行排序。
以下是如何完成的(最有可能是优化的):http://jsfiddle.net/tsimbalar/Dw6QE/。
我们的想法是对比较sortNumber值...
的行列表进行排序答案 3 :(得分:1)
看看这个http://square.github.com/crossfilter/ Square的团队使用了一个聪明的位图索引技术,允许在&lt; 30ms内过滤5.3MB数据......我不确定这是否有帮助,但这是一个非常有趣的技术
答案 4 :(得分:1)
我们可以使用jquery insead of javascript来解决Rob W所回答的问题。它不会影响任何性能问题,例如双循环中的多个JQuery选择器。
var $tbody = $('table tbody');
$tbody.find('tr').sort(function (a, b) {
var tda = $(a).find('td:eq(' + ColumnIndex + ')').text(); // Use your wished column index
var tdb = $(b).find('td:eq(' + ColumnIndex + ')').text(); // Use your wished column index
// if a < b return 1
return tda > tdb ? 1
// else if a > b return -1
: tda < tdb ? -1
// else they are equal - return 0
: 0;
}).appendTo($tbody);
&#13;
使用&lt;而不是&gt;用于降序。