当前位置:  开发笔记 > 编程语言 > 正文

JQuery/Javascript重新排序行

如何解决《JQuery/Javascript重新排序行》经验,为你挑选了3个好方法。

我有一个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);
    }
  }
}

Darin Dimitr.. 10

为什么不在服务器端订购行?如果要在加载页面后立即使用JQuery对它们进行重新排序,那么在服务器代码中执行此作业会更有效,尤其是在用户选择的顺序存储在数据库中时.



1> Darin Dimitr..:

为什么不在服务器端订购行?如果要在加载页面后立即使用JQuery对它们进行重新排序,那么在服务器代码中执行此作业会更有效,尤其是在用户选择的顺序存储在数据库中时.


@Sung和Eli - 我不同意,这是一个答案,他建议采用不同的方式来达到预期的效果......

2> Chris Van Op..:

试试jQuery tablesorter插件.

加载文档时,您可以通过指定要排序的列索引对表进行排序(并允许按多列排序):

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
); 



3> Eli..:

做这样的事情:

假设你有这样的表:

....
....
....
....

和一个像这样的新订单的数组:

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中,它只会看起来喜欢加载的页面 - 应该对查看器透明.

推荐阅读
mylvfamily
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有