javascript - 在页面上高效呈现多个选择框

Question

我正在开发一个网络应用程序，该应用程序大量使用带有用于数据输入的选择下拉列表的网格。网格由多行选择框组成。在某些情况下，页面上可能同时有数百个选择框。

目前，我用类似于下面的方法渲染网格:

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 秒内渲染网格。我仍然想知道，是否有内存/性能效率更高的替代方法来创建这些选择框，也许有某种方法可以引用它们而不是为每一行重新创建它们？

Answer 1

创建一次选择，然后使用克隆将其放置在您需要的位置。如果 HTML 结构完全相同，那么您之后要做的就是为每个select

选择适当的值

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

您的另一种选择是在您的each 语句之前为select 创建一个html 数组，将其连接成一个字符串，并在each 语句将它应用到您的其余 html 中，在添加后选择您选择的选项。 (我希望这是有道理的。)

无论是预先编写行和选择框，为每个循环克隆它(或复制字符串)，并分别为每个循环选择选项，都将是您的最佳选择。 p>

这是使用克隆的一种可能解决方案。它不会利用操作字符串的性能而不是追加，但您可以为您的目的提出一个替代版本。

// 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。