在 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);
}

在 Javascript 中无循环地将行附加到现有的 gridview

Appending rows to existing gridview without loop in Javascript

javascript

asp.net

performance

gridview