我有一个aspx页面,看起来像这样:
<tr id="Row1">
<td>Some label</td>
<td>Some complex control</td>
</tr>
<tr id="Row2">
<td>Some label</td>
<td>Some complex control</td>
</tr>
<tr id="Row3">
<td>Some label</td>
<td>Some complex control</td>
</tr>
加载页面后,我想根据用户先前选择的顺序(存储在数据库中)对这些行重新排序
我如何使用JQuery/JS来实现这一目标？
编辑:
我遇到了appendTo代码的性能问题.一个10行的表需要400ms,这是非常不可接受的.任何人都可以帮我调整性能吗？
function RearrangeTable(csvOrder, tableId)
{
var arrCSVOrder = csvOrder.split(',');
//No need to rearrange if array length is 1
if (arrCSVOrder.length > 1)
{
for (var i = 0; i < arrCSVOrder.length; i++)
{
$('#' + tableId).find('[fieldname = ' + arrCSVOrder[i] + ']').eq(0).parents('tr').eq(0).appendTo('#' + tableId);
}
}
}
Dar*_*rov 10
为什么不在服务器端订购行？如果要在加载页面后立即使用JQuery对它们进行重新排序,那么在服务器代码中执行此作业会更有效,尤其是在用户选择的顺序存储在数据库中时.
Chr*_*tal 10
试试jQuery tablesorter插件.
加载文档时,您可以通过指定要排序的列索引对表进行排序(并允许按多列排序):
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
做这样的事情:
假设你有这样的表:
<table id='table'>
<tr id='row1'><td> .... </td></tr>
<tr id='row2'><td> .... </td></tr>
<tr id='row3'><td> .... </td></tr>
<tr id='row4'><td> .... </td></tr>
</table>
和一个像这样的新订单的数组:
NewOrder[1] = 3;
NewOrder[2] = 4;
NewOrder[3] = 2;
然后,做一些这样的事情(没有经过测试,所以你可能需要调整代码,但这是想法):
for ( i=1; i<=NewOrder.length; i++ ) {
$('#row'+i).appendTo( '#table' );
}
这样,它们按顺序移动到表的末尾.
所以你将有3个移动到最后,然后4个移动到它后面,然后2个移到它后面等等.在他们将ALL全部附加到表的末尾之后,第一个将成为第一行,其余的将在它背后的正确顺序.
编辑:
使表格样式='display:none;' 然后执行$('#table').show(); 在启动时.
再次编辑: 你可以围绕整个身体内容做一个div,比如
<body>
<div id='everything' style='display:none;'>
....
</div>
</body>
因此,整个页面将被隐藏(只是空白),只需加载和订购表所需的时间.
然后你会用:
$(function(){
$('#everything').show();
}
一旦DOM准备就绪,立即显示整个页面.加载页面需要花费不到一秒的时间,但它会一次加载,所以不会有任何闪存丢失的表等等.只要一切都在#everything中,它只会看起来喜欢加载的页面 - 应该对查看器透明.
| 归档时间： |
|
| 查看次数： |
15208 次 |
| 最近记录： |