我有一个动态填充的表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,正如我所说,它会动态填充,所以我有一个Array
其中包含 html。每 1 件<tr>
(未排序)
Fiddle: http://jsfiddle.net/qNwDe/ http://jsfiddle.net/qNwDe/
我编写了一种高效的跨浏览器方法来对表中的行进行排序。双循环中的多个 JQuery 选择器会导致严重的性能问题(正如您所注意到的),因此我已经摆脱了 JQuery。
我的函数的另一个优点是它不介意丢失索引号。我目前指的是每行的第一个单元格,而不是通过类名获取元素。如果您想通过类名引用,我将更改我的函数:
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;
}
Call sortTable()
每当你想对表格进行排序时。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)