JQuery / Javascript重新排序行
我有一个aspx页面，看起来像这样：
Some label Some complex control Some label Some complex control Some label Some complex control 加载页面后，我想根据用户先前选择的顺序（存储在数据库中）对这些行重新排序
我如何使用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); } } }
做这样的事情：
假设你有这样的表：
.... .... .... ....
和一个像这样的新订单的数组：
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，比如
因此，整个页面将被隐藏（只是空白），只需加载和订购表所需的时间。
然后你会用：
$(function(){ $('#everything').show(); }
一旦DOM准备就绪，立即显示整个页面。 加载页面需要花费不到一秒钟的时间，但它会一次加载，所以不会有任何闪存丢失的表等等。只要一切都在#everything中，它只会看起来喜欢加载的页面 - 应该对查看器透明。
为什么不在服务器端订购行？ 如果要在加载页面后立即使用JQuery对它们进行重新排序，那么在服务器代码中执行此作业会更有效，尤其是在用户选择的顺序存储在数据库中时。
试试jQuery tablesorter插件 。
加载文档时，您可以通过指定要排序的列索引对表进行排序（并允许按多列排序）：
$(document).ready(function() { $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); } );
检查jQuery TableSorter插件 ，它非常强大，可以检测列的基础数据类型，并且可以以编程方式对表列进行排序：
$("#yourTable").tablesorter( {sortList: [[0,0]]} ); // This will sort "yourTable" using // the first column, ascending [columnIndex, 0=ASC or 1 = DESC]
请记住，客户端的修改可以通过三种方式让自己对问题持开放态度。
- 如果客户端计算机运行缓慢，则无论您执行什么操作，都可以看到此重新排序。
- 数据表越大，此操作将越慢，重新排序就越明显。
- 客户端可能会禁用JS，这会破坏您的重新排序。
虽然看起来你想做这个客户端来节省自己现在服务器端编程的一些麻烦，但从长远来看，现在投入一些时间来获得服务器端将避免这些麻烦。
如果您在使用自定义控件发布服务器端代码时遇到问题，我们会帮助您解决问题。
工作实例。 只需遍历包含新订单的列表（可能是您从数据库中读取的），构建新表。 然后将表html（）设置为新表html。
label 1 Some complex control label 2 Some complex control label 3 Some complex control
如果用户完成的最后一次排序存储为包含行id的列表，则可以执行以下操作：
loop through list from db { $("#"+rowId).appendTo("#tableId") }
这样，行将从其当前位置取出，并按照它们存储在数据库中的顺序在表内替换。
编辑appendTo方法有效。 但是，在重新排列客户端行的短暂延迟中，在重新排序完成之前，我会看到原始顺序中的行约半秒。 由于页面不使用回发，因此此UI行为更加突出。 对此有何解决方法？
使用css在表上设置display：none。 文档就绪事件触发时使用appendTo方法。 在桌子上显示。 如果禁用js，您可以在内的表上设置display：block的另一个样式标记。