JQuery / Javascript重新排序行 [英] JQuery/Javascript Reordering rows
问题描述
我有一个aspx页面看起来像这样：
I have a aspx page that looks something like this:
<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>
加载页面后，我想根据用户先前选择的行重新排序这些行订单（存储在数据库中）
As soon as the page is loaded, I would want to reorder these rows based on the user's previously selected order (stored in a database)
我如何使用JQuery / JS来实现这一目标？
How would I use JQuery/JS to accomplish this?
编辑：
我遇到了appendTo代码的性能问题。一个10行的表需要400ms，这是非常不可接受的。任何人都可以帮我调整性能吗？
I have run into a performance issue with the appendTo code. It takes 400ms for a table of 10 rows which is really unacceptable. Can anyone help me tweak it for performance?
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);
}
}
}
推荐答案
做这样的事情：
假设你有这样的表：
<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>
这是一个包含新订单的数组：
And an array with the new order like this:
NewOrder[1] = 3;
NewOrder[2] = 4;
NewOrder[3] = 2;
然后，做一些像这样的事情（没有经过测试，所以你可能需要调整代码，但是这是想法）：
Then, do some something like this (not tested, so you may need to tweak the code, but this is the idea):
for ( i=1; i<=NewOrder.length; i++ ) {
$('#row'+i).appendTo( '#table' );
}
这样，它们按顺序移动到表的末尾。
This way, they are moved to the end of the table in order.
所以你将有3个移动到最后，然后4个移动到它后面，然后2个移到后面等等。之后他们已经 ALL 被追加到在表的末尾，第一行将成为第一行，其余的将以正确的顺序排在它后面。
So you will have 3 moved to the end, then 4 behind it, then 2 behind that, etc. After they have ALL been appended to the end of the table, the first one will become the first row, and the rest will be in the correct order behind it.
编辑：
使table style ='display：none;'然后执行$（'＃table'）。show（）;在启动时。
Make the table style='display:none;' and then do $('#table').show(); at startup.
再次编辑：
你可以在整个身体内容上做一个div，比如
Edit Again: You could do a div around the entire body content, like
<body>
<div id='everything' style='display:none;'>
....
</div>
</body>
这样整个页面将被隐藏（只是空白）只需要几分之一秒加载和订购表格。
So that the entire page will be hidden (just blank white) for the fraction of a second it takes to load and order the table.
然后你会使用：
$(function(){
$('#everything').show();
}
要在DOM准备好后立即全部显示整个页面。页面加载需要花费不到一秒的时间，但它会一次加载，所以赢了t是任何闪存的缺失表等等。只要一切都在#everything中，它就像加载的页面一样 - 对观众来说应该是透明的。
To show the entire page all at once as soon as the DOM is ready. It will take a fraction of a second longer for the page to load, but it will all load at once, so there won't be any flash of missing tables, etc. As long as EVERYTHING is in #everything, it will just look like the page loaded - should be transparent to the viewer.
这篇关于JQuery / Javascript重新排序行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
