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/

您的另一种选择是在每个语句之前为select创建一个 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"语句的索引并插入您的selected=selected。

于 2012-06-01T12:22:40.303 回答