1

私は、データ入力用のドロップダウンを選択してグリッドを多用する Web アプリケーションに取り組んでいます。グリッドは、選択ボックスの行で構成されます。場合によっては、ページ上に同時に何百もの選択ボックスが表示されることがあります。

現時点では、以下の方法と同様にグリッドをレンダリングします。

function render(jsonData) {
    var html = [];
    $.each(jsonData.Rows, function (i, row) {
        html.push('<tr data-id="', row.Id, '"><td>');
        renderSelect(html, globalVar.ArrayX, row.ValueX);
        html.push('</td><td>');
        renderSelect(html, globalVar.ArrayY, row.ValueY);
        html.push('</td><td>');
        ...
        html.push('</tr>');
    });
    $('tbody#container').html(html.join(''));
}

function renderSelect(html, set, selectedValue) {
    html.push('<select>');
    $.each(set, function (i, item) {
        html.push('<option value="', item.Id, '"', item.Id === selectedValue ? ' selected="1"' : '', '>', item.Name, '</option>');
    });
    html.push('</select>');
}

ほとんどの選択ボックスには同じオプションがあり、行ごとに選択された項目が異なるだけです (したがって、選択ボックスの html を単純にキャッシュすることはできません)。

パフォーマンスは悪くありません。Chrome はグリッドを 1 秒でレンダリングし、FF と IE は約 2 秒でレンダリングします。それでも、これらの選択ボックスを作成するためのよりメモリ/パフォーマンス効率の高い代替手段があるかどうか疑問に思っています。代わりにそれらを参照する方法があるかもしれません。行ごとにそれらを再作成するのですか？

4

1 に答える 1

2

選択を一度作成し、クローンを使用して必要な場所に配置します。HTML 構造が文字通り同じである場合、その後は、選択ごとに適切な値を選択するだけです。

http://api.jquery.com/clone/

もう 1 つの方法は、selectの html 配列を各ステートメントの前に 1 回作成し、それを文字列に結合し、各ステートメント内でそれを残りの html に適用し、追加後に選択したオプションを選択することです。（それが理にかなっていることを願っています。）

いずれにせよ、事前に行と選択ボックスを作成し、ループごとに複製 (または文字列をコピー) し、それぞれのオプションを個別に選択することが、最もパフォーマンスの高いオプションになります。

クローンを使用した解決策の 1 つを次に示します。追加よりも文字列を操作するパフォーマンスを活用していませんが、目的に合わせて別のバージョンを考え出すことができます。

// construct your html ahead of time
var rowHtml = [];
rowHtml.push('<tr"><td>');
rowHtml.push('<select>');
$.each(globalVar.ArrayX, function (i, item) {
    rowHtml.push('<option value="', item.Id, '"', '>', item.Name, '</option>');
});
rowHtml.push('</select>');
rowHtml.push('</td><td>');
$.each(globalVar.ArrayY, function (i, item) {
    rowHtml.push('<option value="', item.Id, '"', '>', item.Name, '</option>');
});
rowHtml.push('</select>');
rowHtml.push('</td><td>');
rowHtml.push('</tr>');
var rowTemplate = $(rowHtml.join(''));

// make a variable for the container once so we can save time performing the DOM lookup
var container = $('tbody#container');

$(jsonData.Rows).each(function (i, row) {
    // since I have to do lookups I've chosen to manipulate attributes using jquery
    // this should move quickly now that we are just cloning
    var clone = rowTemplate.clone();
    clone.attr("data-id", row.Id);
    $("select option[value=" + row.ValueX + "]", clone).attr("selected", "selected");
    container.append(clone);
});

別の方法として、jquery のクローン作成とルックアップを行いたくない場合は、value="X"ステートメントのインデックスを探してselected=selectedを挿入する文字列操作を行います。

于 2012-06-01T12:22:40.303 に答える