发表新帖
发表新帖

JQuery/Javascript Reordering rows

前端 未结
关注
8 1351
时光说笑
时光说笑 2021-02-06 06:50

I have a aspx page that looks something like this:


  Some label
  Some complex control
相关标签:
8条回答
  • 一整个雨季
    2021-02-06 07:09

    Try the jQuery tablesorter plugin.

    When the document loads you can sort the table by specifying the column index to sort on (and it allows sorting by multiple columns):

    $(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
);
    0 讨论(0)
  • 予麋鹿
    2021-02-06 07:10

    If the last sorting done by the user is stored as a list containing the row id, you could do this:

    loop through list from db {
    $("#"+rowId).appendTo("#tableId")
}

    This way, the rows will be taken out of their current location and replaced inside the table in the order they are stored in the database.

    0 讨论(0)
  • -上瘾入骨i
    2021-02-06 07:11

    Why not order the rows on the server side? If you are going to reorder them with JQuery as soon as the page is loaded then it will be more efficient to do this job in server code, especially if the user's selected order is stored in a database.

    0 讨论(0)
  • 走了就别回头了
    2021-02-06 07:12

    Working example. Simply iterate through a list containing the new order (which, presumably you read from the DB), building the new table. Then set the table html() to the new table html.

    <html>
<head>
    <script type="text/javascript"
    src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
jQuery.fn.outer = function(){
  return $( $('<div></div>').html(this.clone()) ).html();
}
$(function(){
    newtbl = "";
    neworder = [2,3,1];
    for(i=0;i<neworder.length;i++){
        newtbl += $("#Row"+neworder[i]).outer();
    }
    $("#tbl").html("<table id=\"tbl\">" + newtbl + "</table>")
});
</script>       
</head>
<body>
<table id="tbl">
<tr id="Row1">
  <td>label 1</td>
  <td>Some complex control</td>
</tr>
<tr id="Row2">
  <td>label 2</td>
  <td>Some complex control</td>
</tr>
<tr id="Row3">
  <td>label 3</td>
  <td>Some complex control</td>
</tr>
</table>
</body>
</html>
    0 讨论(0)
  • 悲&欢浪女
    2021-02-06 07:14

    Just do something like this:

    Say you have table like so:

    <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.

    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.

    Edit:

    Make the table style='display:none;' and then do $('#table').show(); at startup.

    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.

    Then you would use:

    $(function(){
    $('#everything').show();
}

    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.

    0 讨论(0)
  • 说谎
    2021-02-06 07:31

    EDIT appendTo method works. However, in the short delay of rearranging the rows on the client side, I see the rows in their original order for about half a second before the reordering is complete. This UI behavior is more prominent since the page does not use postbacks. Any workaround for this?

    Set display:none on the table with css. The when the document ready event fires use the appendTo method. The do show on the table. You can set another style tag with display:block on the table inside <noscript> in case js is disabled.

    0 讨论(0)
 看不清?
提交回复
热议问题