1

桌子：

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

4

2 回答 2

0

这是我的方法。我正在克隆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 多条记录需要大约 300 毫秒。此外，最好使用无 jQuery 的方法。

发布此内容以防其他人可能会发现它足够简单以满足他们的需求。

经过数小时的焦躁思考，我得出了以下结论。如果这个示例还不够，我已经写了一篇完整的博客文章来解释它背后的逻辑，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);
于 2012-09-02T20:32:59.403 回答
0

见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，性能约为 41,000 ops/秒（12,300 ops/300ms），因此它比您的代码快一点。

编辑：

上面的代码可以简化（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），但我认为有大量的行它会。

于 2012-09-03T00:39:12.383 回答