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

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 に答える
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 に答える