使用JQuery动态加载数千行到表中 - Use JQuery to dynamically load thousands of rows into table

Use JQuery to dynamically load thousands of rows into table

本文关键字：千行动态 JQuery 加载使用 | 更新日期: 2023-09-27

我正在为CRM开发一个面向前端的GUI。我们的客户结构是分层的。每个客户都有许多帐单地址，许多送货地址，以及与每个帐户相关联的许多联系人。我遇到的问题是，一些客户与该帐户关联的船舶数量远远超过10,000。这在同时调用它们时就成了一个问题。我的后端很好，它在大约280ms(平均)内获得所有到船的数据。我使用Javascript将所有信息加载到表中。下面是我目前正在做的:

    var r = new Array();
var j = -1, recordID;
r[++j] = '';
    //Loop through the data and build an array.
    for (i in data) {
        var d = data[i];
            recordID = d.id;
        r[++j] = '<tr>';
        r[++j] = '<td>'+ d['ADDRESS_LINE_1'] +'</td>';
        r[++j] = '</tr>';
    }
    //The line below joins the array and appends it to the table.
    $('#table').append(r.join(''));

我已经和为我构建规范的人谈过了，他们需要一次性显示所有的规范，没有过滤的可能。现在，在加载所有数据并打开模态之前，它需要大约4s时间。

有更快的方法吗?

$.map(yourArrayVar, function(value, key) {
   return '<TR><TD>'+value['ADDRESS_LINE_1']+'</TD></TR>';
});
$("#table").append(yourArrayVar.join(''));

这可以帮助您获得比循环更好的性能。在这里了解更多信息，http://api.jquery.com/jquery.map/