JQuery的/ JavaScript的重新排序行

我有一個aspx頁面，看起來是這樣的：JQuery的/ JavaScript的重新排序行

<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); 
    } 
    } 
}

來源

2009-03-01 DotnetDude

您是否解決了這個問題還是仍在等待答案？ – James 2009-03-12 10:05:40

就做這樣的事情：

假設你有一個表像這樣：

<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個，等他們有後所有的被追加到表尾，第一個將成爲第一行，其餘的將按照正確的順序排列。

編輯：

製作表格樣式= '顯示：無;'然後做$（'＃table'）。show（）;在啓動時。

再次編輯： 你可以做圍繞整個主體內容股利，像

<body> 
<div id='everything' style='display:none;'> 
.... 
</div> 
</body>

這樣整個頁面將被隱藏（只是空白）如屬第二它需要的分數加載和訂購表格。

那麼你可以使用：

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

要一次性儘快顯示整個頁面的DOM已準備就緒。加載頁面需要幾分之一秒的時間，但它會一次加載，所以不會有任何缺少表格的閃光燈等等。只要一切都在#everything中，它就會看起來像就像加載的頁面一樣 - 對觀衆應該是透明的。

來源

2009-03-06 00:50:44 Eli

爲什麼不在服務器端排序？如果您打算在頁面加載後立即使用JQuery對其進行重新排序，那麼在服務器代碼中執行此項工作效率更高，尤其是在用戶選擇的訂單存儲在數據庫中的情況下。

來源

2009-03-01 22:50:55

你的意思是我在服務器端動態添加這些行嗎？由於這是一個複雜的頁面，因此我想避免動態創建這些行（這些行有多個我在示例中省略的自定義控件） – DotnetDude 2009-03-01 23:00:30

DotnetDude：我沒有看到在客戶端執行此操作會更容易比在服務器上。你打算如何告訴客戶你想要排序的順序？ – svinto 2009-03-01 23:06:34

svinto - 我的計劃是交換DOM級別的行。我正在尋找更優雅的解決方案。如果我必須這樣做，在服務器端，我同意這是更簡單，但我最終將不得不創建所有的飛行控制和我寧願不創建動態控件（視圖狀態問題 – DotnetDude 2009-03-01 23:16:10

試試jQuery tablesorter plugin。

當文檔加載後，你可以通過指定列索引進行排序排序表（它允許多個列排序）：

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

來源

2009-03-01 22:52:32

檢查了jQuery TableSorter Plugin，這是非常強大的檢測底層列的數據類型，並且您可以表列編程排序：

$("#yourTable").tablesorter({sortList: [[0,0]]}); 
// This will sort "yourTable" using 
// the first column, ascending [columnIndex, 0=ASC or 1 = DESC]

來源

2009-03-01 22:53:47 CMS

如果用戶完成最後的排序存儲爲包含行ID列表，你可以這樣做：

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

這樣，這些行將從他們當前的位置取出，並按它們存儲在數據庫中的順序在表內取代。

來源

2009-03-02 14:24:12 peirix

請記住，客戶方面有三種方式可以解決問題。

如果客戶端計算機速度很慢，無論您做什麼，都可以看到重新排序。
數據表越大，這個動作將會越慢，重新排序的可見性就越大。
客戶端可能會禁用JS，這會破壞您的重新排序。

雖然看起來你想這樣做，客戶端現在自己保存在服務器端編程有些頭疼，從長遠來看，這個投資一段時間，現在得到它的服務器端將避免這些麻煩。

如果您在使用自定義控件發佈服務器端代碼時遇到問題，我們會爲您提供幫助。

來源

2009-03-09 18:56:24 Parrots

EDIT appendTo方法的工作原理。但是，在重新排列客戶端上的行的短暫延遲中，在重新排序完成之前，我按照原始順序查看行約半秒。由於該頁面不使用回發，因此此UI行爲更加突出。任何解決方法？

設置顯示：沒有與CSS的表上。文檔就緒事件觸發時使用appendTo方法。桌子上的做秀。如果js被禁用，您可以在<noscript>的桌子上設置另一個帶有display：block的style標籤。

來源

2009-03-12 23:34:28 Vasil

工作示例。只需遍歷包含新訂單的列表（可能是從數據庫讀取的），即可構建新表。然後將表html（）設置爲新的表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>

來源

2009-03-13 14:29:57

JQuery的/ JavaScript的重新排序行

回答

相關問題