在Javascript中将行附加到现有的gridview而不循环

Question

我在 Javascript 中有一个函数，可以将新行附加到现有的 GridView。

function OnSuccess(response) {
    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
    var customers = xml.find("ResultTable");
    $("[id$=grd] .loader").remove();
    customers.each(function () {
        var customer = $(this);
        var row = $("[id$=grd] tr").eq(1).clone(true);
        $(".groupname", row).html(customer.find("GroupName").text());
        $(".fullfundname", row).html(customer.find("FullFundName").text());
        $(".datafieldname", row).html(customer.find("DataFieldName").text());
        $(".comparisonresult", row).html(customer.find("ComparisonResult").text());

        $("[id$=grd]").append(row);
    });

}

这按预期工作，但速度很慢。每次调用此函数时，将向现有网格追加 1000 条记录。

任何提高性能的指针，比如我们可以一次性分配整个 xml。注意，我的列名是固定的

Answer 1

我尝试为您提供解决方案，但我没有测试数据。希望这项工作。

jQuery.fn.outerHTML = function (s) {
    return s ?
        this.before(s).remove() :
        jQuery("<p>").append(this.eq(0).clone()).html();
};

function OnSuccess(response) {
    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
    var customers = xml.find("ResultTable");
    $("[id$=grd] .loader").remove();
    var template = $("[id$=grd] tr").eq(1).clone(true);
    template.find(".groupname").text("@@GROUPNAME");
    template.find(".fullfundname").text("@@FULLFUNDNAME");
    template.find(".datafieldname").text("@@DATAFIELDNAME");
    template.find(".comparisonresult").text("@@COMPARISONRESULT");
    template = template.outerHTML();
    let newRows = "";
    customers.each(function () {
        var customer = $(this);
        let row = template;
        row = row.replace("@@GROUPNAME", customer.find("GroupName").text());
           .replace("@@FULLFUNDNAME", customer.find("FullFundName").text());
           .replace("@@DATAFIELDNAME", customer.find("DataFieldName").text());
           .replace("@@COMPARISONRESULT", customer.find("ComparisonResult").text());
        newRows += row;
    });
    $("[id$=grd]").html($("[id$=grd]").html() + newRows);
}