[英]JQuery/Javascript Reordering rows
我有一個aspx頁面，看起來像這樣：
<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);
}
}
}
為什么不在服務器端訂購行？ 如果要在加載頁面后立即使用JQuery對它們進行重新排序，那么在服務器代碼中執行此作業會更有效，尤其是在用戶選擇的順序存儲在數據庫中時。
試試jQuery tablesorter插件 。
加載文檔時，您可以通過指定要排序的列索引對表進行排序（並允許按多列排序）：
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
做這樣的事情：
假設你有這樣的表：
<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個移到后面，等等。在他們將ALL全部附加到表的末尾之后，第一個將成為第一行，其余的將在它背后的正確順序。
編輯：
使表格樣式='display：none;' 然后執行$（'＃table'）。show（）; 在啟動時。
再次編輯：你可以圍繞整個身體內容做一個div，比如
<body>
<div id='everything' style='display:none;'>
....
</div>
</body>
因此，整個頁面將被隱藏（只是空白），只需加載和訂購表所需的時間。
然后你會用：
$(function(){
$('#everything').show();
}
一旦DOM准備就緒，立即顯示整個頁面。 加載頁面需要花費不到一秒的時間，但它會一次加載，所以不會有任何閃存丟失的表等等。只要一切都在#everything中，它只會看起來喜歡加載的頁面 - 應該對查看器透明。
檢查jQuery TableSorter插件 ，它非常強大，可以檢測列的基礎數據類型，並且可以以編程方式對表列進行排序：
$("#yourTable").tablesorter( {sortList: [[0,0]]} );
// This will sort "yourTable" using
// the first column, ascending [columnIndex, 0=ASC or 1 = DESC]
請記住，客戶端的修改可以通過三種方式讓自己對問題持開放態度。
雖然看起來你想做這個客戶端來節省自己現在服務器端編程的一些麻煩，但從長遠來看，現在投入一些時間來獲得服務器端將避免這些麻煩。
如果您在使用自定義控件發布服務器端代碼時遇到問題，我們會幫助您解決問題。
工作實例。 只需遍歷包含新訂單的列表（可能是您從DB中讀取的），構建新表。 然后將表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>
如果用戶完成的最后一次排序存儲為包含行id的列表，則可以執行以下操作：
loop through list from db {
$("#"+rowId).appendTo("#tableId")
}
這樣，行將從其當前位置取出，並按照它們存儲在數據庫中的順序在表內替換。
編輯appendTo方法有效。 但是，在重新排列客戶端行的短暫延遲中，在重新排序完成之前，我會看到原始順序中的行大約半秒鍾。 由於頁面不使用回發，因此該UI行為更加突出。 有什么解決方法嗎？
使用css在表上設置display：none。 文檔就緒事件觸發時使用appendTo方法。 在桌子上做秀。 如果禁用了js，您可以在<noscript>內的表上設置另一個帶有display：block的樣式標記。
iPhone喜歡Javascript / jQuery的重新排序/隨機播放小部件
[英]iPhone like reordering/shuffle widget for Javascript / jQuery
jQuery Datatable拖放行，根據json數據對行進行重新排序
[英]Jquery Datatable drag and drop rows , Row reordering from json data
如何使用 JavaScript 為表中的行創建重新排序功能
[英]How to create reordering functionality for rows in a table using JavaScript
使用jQuery / JavaScript操作HTML表（用於列重新排序，可見性）？
[英]Manipulate an HTML table (for column reordering, visibility) using jQuery/JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.