使用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

你基本上想要设置你的循环,以便它们经常产生其他线程.以下是本文中有关运行CPU密集型操作而不冻结UI的主题的示例代码:

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插件.它通过大幅减少你必须做的连接数来整理整个过程.在我最近做了一些重构之后,它也表现得非常好,这导致了相当大的速度提升.这是一个例子(没有为你完成所有的工作!):

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

Answer 2

我一直在使用JTemplates来完成你所描述的内容.戴夫·沃德在他的博客的例子在这里.JTemplates的主要好处是你的html没有编入你的javascript.你编写一个模板并调用两个函数让jTemplate从你的模板和你的json构建html.