如何排序錶行，因爲行權重已知？

Question

表：

<table> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
</table> 

表數據存在於一個陣列（見table_matrics）。陣列進行排序並且weight_index跟蹤訂單中的更改（在此情況下爲[1, 1, 1]）。

var desc   = true; 

var weight_index = []; 

var table_matrics = [1, 2, 3]; 

table_matrics.sort(function(a, b){ 
    var weight; 

    if(a == b) 
    { 
     weight = 0; 
    } 
    else 
    { 
     weight = (desc ? a > b : a < b) ? -1 : 1; 
    } 

    weight_index.push(weight); 

    return weight; 
}); 

如何排序/使用weight_index重新渲染錶行？

Answer 1

這是我的方法。我克隆了表格的tbody。然後對jQuery對象中的行進行排序，並用排序後的行替換當前的主體tbody。

var data = tbody.clone(); 

var i  = 0; 

data  = data.find('tr').sort(function() 
{ 
    return weight_index[i++]; 
}); 

tbody.html(data); 

雖然，它比較慢。擁有10,000多條記錄需要約300ms。此外，jQuery-less方法更可取。

發佈此信息以防其他人可能會發現它足夠簡單以滿足他們的需求。

---

經過幾個小時的不安思考，我最終得出了以下結論。如果這個樣本還不夠，我寫了一篇完整的博客文章，解釋它背後的邏輯，http://anuary.com/57/sorting-large-tables-with-javascript。

// Will use this to re-attach the tbody object. 
var table  = tbody.parent(); 

// Detach the tbody to prevent unnecessary overhead related 
// to the browser environment. 
var tbody  = tbody.detach(); 

// Convert NodeList into an array. 
rows   = Array.prototype.slice.call(rows, 0); 

var last_row = rows[data[data.length-1].index]; 

// Knowing the last element in the table, move all the elements behind it 
// in the order they appear in the data map 
for(var i = 0, j = data.length-1; i < j; i++) 
{ 
    tbody[0].insertBefore(rows[data[i].index], last_row); 

    // Restore the index. 
    data[i].index = i; 
} 

// Restore the index. 
data[data.length-1].index = data.length-1; 

table.append(tbody); 

Answer 2

見http://jsfiddle.net/rJe2U/1/

var desc   = true, 
    weight_index = [], 
    table_matrics = [1, 2, 3], 
    tb=document.getElementById('tb'), 
    rowsCollection=tb.rows, 
    rows=[]; 

try{ 
    rows=Array.prototype.slice.call(rowsCollection,0); 
}catch(e){ 
    for(var i=0,l=rowsCollection.length;i<l;i++){ 
     rows.push(rowsCollection[i]); 
    } 
} 

table_matrics.sort(function(a, b){ 
    var weight; 
    if(a == b){ 
     weight = 0; 
    }else{ 
     weight = (desc ? a > b : a < b) ? -1 : 1; 
    } 
    weight_index.push(weight); 
    if(weight>0){ 
     tb.insertBefore(rows[b-1], rows[a-1]) 
    }else if(weight<0){ 
     tb.insertBefore(rows[a-1], rows[b-1]) 
    } 
    return weight; 
}); 

據http://jsperf.com/sorting-table-rows-with-known-row-weight，性能41000 OPS /秒​​（12300 OPS/300毫秒），所以這是一個有點比你的代碼運行得更快。

編輯：

上面的代碼可以簡化（http://jsfiddle.net/rJe2U/2/）：

var desc   = true, 
    weight_index = [], 
    table_matrics = [1, 2, 3], 
    tb=document.getElementById('tb'), 
    rows=[]; 

try{ 
    rows=Array.prototype.slice.call(tb.rows,0); 
}catch(e){ 
    for(var i=0,rowsCollection=tb.rows,l=rowsCollection.length;i<l;i++){ 
     rows.push(rowsCollection[i]); 
    } 
} 

table_matrics.sort(function(a, b){ 
    var weight; 
    if(a == b){ 
     weight = 0; 
    }else{ 
     if(desc ? a > b : a < b){ 
      weight=-1; 
      tb.insertBefore(rows[a-1], rows[b-1]); 
     }else{ 
      weight=1; 
      tb.insertBefore(rows[b-1], rows[a-1]); 
     } 
    } 
    weight_index.push(weight); 
    return weight; 
}); 

而且你不需要weight_index，所以可以刪除（http://jsfiddle.net/rJe2U/3/）：

var desc   = true, 
    table_matrics = [1, 2, 3], 
    tb=document.getElementById('tb'), 
    rows=[]; 

try{ 
    rows=Array.prototype.slice.call(tb.rows,0); 
}catch(e){ 
    for(var i=0,rowsCollection=tb.rows,l=rowsCollection.length;i<l;i++){ 
     rows.push(rowsCollection[i]); 
    } 
} 

table_matrics.sort(function(a, b){ 
    var weight; 
    if(a == b){ 
     return 0; 
    } 
    if(desc ? a > b : a < b){ 
     tb.insertBefore(rows[a-1], rows[b-1]); 
     return -1; 
    } 
    tb.insertBefore(rows[b-1], rows[a-1]); 
    return 1; 
}); 

的表現似乎並沒有改善（http://jsperf.com/sorting-table-rows-with-known-row-weight/3），但我認爲無線將會有大量的行。