javascript - 使用 jQuery 即时构建 HTML 表格

Question

下面是我用来动态构建 HTML 表格的代码(使用从服务器接收的 JSON 数据)。

加载数据时，我会显示动画请稍候 (.gif) 图形。但是，当 JavaScript 函数构建表格时，图形会卡住。起初，我只是很高兴能够实现这一点(显示表格)，我想现在我需要提高效率。至少我需要阻止动画图形卡住。我可以进入静态“正在加载”显示，但我宁愿让这个方法起作用。

对我的“请稍候”显示有何建议？还有效率？可能是构建表格的更好方法？或者可能不是表格，而是其他一些“表格”，例如显示

var t = eval( "(" + request + ")" ) ;
var myTable = '' ;
myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>' ;
myTable +=  "<thead>" ;
myTable +=   "<tr>";
for (var i = 0; i < t.hdrs.length; i++) {
    myTable +=    "<th>"     + header +       "</th>";
}
myTable +=   "</tr>" ;
myTable +=  "</thead>" ;
myTable +=  "<tbody>" ;

for (var i = 0; i < t.data.length; i++) {
    myTable +=    '<tr>';
    for (var j = 0; j < t.hdrs.length; j++) {
        myTable += '<td>';
        if (t.data[i][t.hdrs[j]] == "") {
            myTable += "&nbsp;" ;
        }
        else {
            myTable += t.data[i][t.hdrs[j]] ;
        }
        myTable += "</td>";
    }
    myTable +=    "</tr>";
}
myTable +=  "</tbody>" ;
myTable += "</table>" ;

$("#result").append(myTable) ;
$("#PleaseWaitGraphic").addClass("hide");
$(".rslt").removeClass("hide") ;

Answer 1

您基本上想要设置循环，以便它们经常让步给其他线程。以下是 this article 中的一些示例代码关于在不卡住 UI 的情况下运行 CPU 密集型操作的主题:

function doSomething (progressFn [, additional arguments]) {
    // Initialize a few things here...
    (function () {
        // Do a little bit of work here...
        if (continuation condition) {
            // Inform the application of the progress
            progressFn(value, total);
            // Process next chunk
            setTimeout(arguments.callee, 0);
        }
    })();
}

就简化脚本中 HTML 的生成而言，如果您使用 jQuery，您可能会给我的 Simple Templates插件试试。它通过大幅减少必须执行的串联次数来简化流程。在我最近进行了一些重构之后，它的性能也非常好，导致了相当大的 speed increase 。这是一个示例(无需为您完成所有工作!):<​​/p>

var t = eval('(' + request + ')') ;
var templates = {
    tr : '<tr>#{row}</tr>',
    th : '<th>#{header}</th>',
    td : '<td>#{cell}</td>'
};
var table = '<table><thead><tr>';
$.each(t.hdrs, function (key, val) {
    table += $.tmpl(templates.th, {header: val});
});
...