Question

我正在开发一个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左右。我仍然想知道，如果可能有更多的内存/性能效率替代创建这些选择框，也许某种方式引用它们而不是为每一行重新创建它们？

Answer 1

创建选择一次，然后使用clone将其放置在您需要的位置。如果HTML结构字面上相同，那么您之后必须做的就是为每个选择选择适当的值

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

您的另一种选择是在每个语句之前为选择创建一个html数组，将其连接到一个字符串中，并在每个内部语句将其应用于您的其余html选择选项后添加。（我希望这是有道理的。）

无论是编写行和选择框之前，为每个循环克隆它（或复制字符串），并为每个循环单独选择选项，都将是最高效的选项。

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

// 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”语句的索引并插入你的选定=选择

有效地渲染页面上的许多选择框

1 个答案: