0

並べ替えに関する多くの投稿を見てきましたが、典型的なシナリオと思われるものに答えるものはありません。

jQueryを使用してHTMLテーブルをソートしようとしていますが、列をソートするためにクリックしたリンクが、ソートされているテーブル内に存在しません。スクロール テーブルの要件に対応するために、テーブル ヘッダーを「偽造」します。

私が今していることは -

  • 行IDとともに選択する必要がある列内の値を含む配列をロードします
  • それらの値に基づいてその配列をソートします
  • その並べ替えられた配列のインデックスに基づいて、行を HTML テーブルに挿入します。

予想どおり、これをローカルで実行するには 10 秒近くかかります。

コードサンプル -

var sortArr = new Array();

$('tr td.' + name).each(function () {
    ResidentID = $(this).parent().attr("ResidentID");
    BID = $(this).parent().attr("BRecordID");

    if ($(this).find('select').length > 0) { //ddls
        columnText = $(this).find('select option:selected').text();
        sortArr.push({ residentId: ResidentID, bID: BID, text: columnText });
    }
    else if ($(this).find('input').length > 0) {//Textbox or checkboxes
        columnText = $(this).find('input').val();
        sortArr.push({ residentId: ResidentID, bID: BID, text: columnText });
    }
});

if (sortDirection == 'ascending') {
    colHeader.attr('sortorder', 'descending')
    sortArr = sortArr.sort(function (v, t) {
        return v.text.localeCompare(t.text);
    });
}
else {
    colHeader.attr('sortorder', 'ascending')
    sortArr = sortArr.sort(function (v, t) {
        return t.text.localeCompare(v.text);
    });
}

for (var i = 0; i < sortArr.length; i++) {
    $("[id$=fixedDataTable] > tbody > tr").eq(i).after($("[id$=trFixedDataRow_" + sortArr[i].residentId + "]"));

    $("[id$=residentDetailDataTable] > tbody > tr").eq(i).after($("[id$=trResScrollDataRow_" + sortArr[i].residentId + "]"));

    $("[id$=bDetailDataTable] > tbody > tr").eq(i).after($("[id$=trBScrollDataRow_" + sortArr[i].bmrID + "]"));
}

これを達成するためのより速い方法はありますか？

4

2 に答える 2

0

このソート方法に固執することが唯一のアプローチのようです。

于 2013-07-02T20:27:09.270 に答える
0

ソートする列を見つけてソートし、テーブルを再作成するアプローチは正しいです。しかし、あなたがそれをどのように行っているかは非効率的です。スピードアップのためにできること

  1. jquery オブジェクトの再構築は避けてください。たとえば$(this)、多くの場所にあります。ローカル変数にキャッシュします。

  2. dom を直接操作する代わりに。DOM テーブルに直接マッピングされる 2D 配列にデータを格納することを検討してください。これが最大の改善になると思います。必要に応じて 2D 配列を並べ替えてから、dom テーブルを再作成するだけです。

  3. 各テーブル行に、そのセル/行に基づいて一意の ID を与えることを検討してください。そうすれば、2D 配列をより簡単にマップできます

    スニペットのこの部分について、コードに戻ります

    for (var i = 0; i < sortArr.length; i++) {
    $("[id$=fixedDataTable] > tbody > tr").eq(i).after($("[id$=trFixedDataRow_" +     sortArr[i].residentId + "]"));

    $("[id$=residentDetailDataTable] > tbody > tr").eq(i).after($("    [id$=trResScrollDataRow_" + sortArr[i].residentId + "]"));

    $("[id$=bDetailDataTable] > tbody > tr").eq(i).after($("[id$=trBScrollDataRow_" + sortArr[i].bmrID + "]"));
}

forループの前に結果を変数に保存して、$("[id$=...tr")jqueryがすべての反復でそれを探す必要がないようにすることはできますか? そして、おそらくキャッシュされたデータを自分でインデックス化できますか?

于 2013-07-02T15:28:11.413 に答える