首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

使用jQuery动态构建HTML表

作者：小白也坚强_177 | 2023-09-05 11:45
如何解决《使用jQuery动态构建HTML表》经验，为你挑选了2个好方法。

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

我在加载数据时显示动画的等待(.gif)图形.但是,当JavaScript函数构建表时,图形会冻结.起初,我很高兴能够实现这一目标(显示表格),我想现在我需要努力提高效率.至少我需要阻止动画图形冻结.我可以去静态"加载"显示,但我宁愿让这个方法工作.

我的建议请等待显示？和效率？可能是建立桌子的更好方法？或许不是一张桌子,而是一些其他"桌子"就像展示一样

var t = eval( "(" + request + ")" ) ;
var myTable = '' ;
myTable += '' ;
myTable +=  "" ;
myTable +=   "";
for (var i = 0; i < t.hdrs.length; i++) {
    myTable +=    "";
}
myTable +=   "" ;
myTable +=  "" ;
myTable +=  "" ;

for (var i = 0; i < t.data.length; i++) {
    myTable +=    '';
    for (var j = 0; j < t.hdrs.length; j++) {
        myTable += '";
    }
    myTable +=    "";
}
myTable +=  "" ;
myTable += "
"     + header +       "
';
        if (t.data[i][t.hdrs[j]] == "") {
            myTable += " " ;
        }
        else {
            myTable += t.data[i][t.hdrs[j]] ;
        }
        myTable += "
" ;

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

Andrew Hedge.. 26

你基本上想要设置你的循环,以便它们经常产生其他线程.以下是本文中有关运行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 : '#{row}',
    th : '#{header}',
    td : '#{cell}'
};
var table = '';
$.each(t.hdrs, function (key, val) {
    table += $.tmpl(templates.th, {header: val});
});
...


          
        

      

  

  
  

    

      

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


1> Andrew Hedge..：
你基本上想要设置你的循环,以便它们经常产生其他线程.以下是本文中有关运行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 : '
#{row}',
    th : '',
    td : ''
};
var table = '

        
    
      






#{header}#{cell}
';
$.each(t.hdrs, function (key, val) {
    table += $.tmpl(templates.th, {header: val});
});
...



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


    

        
推荐阅读

        

            
        

    


    

        

            
            

                
                    devbox
                
            


            

                小白也坚强_177            


            

                这个屌丝很懒，什么也没留下！            

            
            


                                
                    
                    关注作者
                            


        

    



    

        
Tags | 热门标签

        

            
        

    



    

        
RankList | 热门文章

        

            
        

    





    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有