it-swarm-eu.dev

Vytváření HTML tabulky za běhu pomocí jQuery

Níže je kód, který používám k vytvoření tabulky HTML za běhu (pomocí dat JSON přijatých ze serveru).

Při načítání dat zobrazuji animovanou grafiku (.gif). Grafika však zamrzne, zatímco funkce JavaScript vytváří tabulku. Zpočátku jsem byl rád, že se to stalo (zobrazit tabulku), myslím, že teď musím pracovat na efektivitě. Přinejmenším musím zastavit animovanou grafiku před zamrznutím. Můžu jít na statické "Načítání" displej, ale raději bych tuto metodu pracovat.

Návrhy na mé prosím čekají na zobrazení? A účinnost? Možná lepší způsob, jak postavit stůl? Nebo možná ne stůl, ale nějaký jiný "stolní" displej

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") ;
21
Jay Corbett

V podstatě chcete nastavit smyčky, aby se tak často dostávali k jiným vláknům. Zde je příklad kódu z tento článek na téma běžících operací s CPU bez zmrazení uživatelského rozhraní:

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

Co se týče zjednodušení tvorby HTML ve vašem skriptu, pokud používáte jQuery, můžete dát můj Simple Templates plug-in zkusit. Zpracovává proces tím, že drasticky snižuje počet zřetězení, které musíte udělat. To funguje docela dobře, taky poté, co jsem nedávno udělal nějaké refactoring, který vyústil v poměrně velké zvýšení rychlosti . Zde je příklad (bez dělání vše práce pro vás!):

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

Používám JTemplates abych dosáhl toho, co popisujete. Dave Ward má příklad na svém blogu zde . Hlavní výhodou JTemplates je, že vaše HTML není tkané do vašeho JavaScriptu. Napíšete šablonu a zavoláte dvě funkce, aby jTemplate vytvořil html z vaší šablony a vašeho json.

11
Guichard

Použití innerHTML může být rozhodně mnohem rychlejší než použití HTML-to-DOM-ifier, který používá innerHTML, ale dělá spoustu zpracování na vstupech.

Navrhuji zkontrolovat chain.js jako způsob, jak rychle vytvořit tabulky a další opakující se datové struktury z objektů JavaScript. Je to opravdu lehký, chytrý databázový plugin pro jQuery.

3
bhollis

To, co děláte, je sestavení řetězce a poté jeho vložení okamžitě. A co vytvoření skutečného elementu tabulky (tj. $("<table>")), a následně přidání každého řádku do něj? V době, kdy jej skutečně vložíte do stránky, budou uzly DOM vytvořeny, takže by to nemělo být tak velké.

3
Jim

Pro začátek, check out flydom a jeho varianty, budou pomáhat termendicky. Mohl byste dát více souvislostí? Pokud se nejedná o onload a právě vložené na stránku, jen zabalení celé věci v $ (function () {/ * code * /}) bude pravděpodobně vyčistit vše, co máte s problémy. Inline JS se provede okamžitě, což znamená, že smyčka pro tabulku. onload je událost a v podstatě „oddělená“.

0
neouser99

Hledat na webu JavaScript a StringBuilder. Jakmile máte sestavu řetězců JavaScriptu, ujistěte se, že používáte metodu .append pro každé zřetězení. To znamená, že nechcete mít žádné zřetězení +. Poté vyhledejte JavaScript a replacehtml. Tuto funkci použijte místo innerHTML.

0
Andrew

Moje zkušenost byla, že existují dvě diskrétní zpoždění. Jedním z nich je zřetězení všech těchto řetězců dohromady. Druhý je, když se prohlížeč pokouší vykreslit řetězec. Obvykle je to IE, které má nejvíce problémů s UI zamrzne, z části proto, že je to mnohem pomalejší při spuštění JavaScriptu. To by mělo být lepší v IE8.

Co bych ve vašem případě navrhl, je prolomení operace do kroků. Řekněte pro tabulku řádků 100, nejprve vytvořte platnou tabulku řádků 10. Pak budete výstup, který na obrazovku a pomocí setTimeout vrátit kontrolu do prohlížeče, takže UI přestane blokovat. Když se setTimeout vrátí, uděláte dalších 10 řádků, atd.

Vytvoření tabulky pomocí DOM je jistě "čistší", jak říkali jiní. Pokud jde o výkonnost, existuje však strmá cena. Podívejte se na výborný quirksmode článek na toto téma, který má některá měřítka, která můžete spustit sami.

Dlouhý příběh krátký, innerHTML je mnohem, mnohem rychlejší než DOM, dokonce i na moderních JS motorech.

0
Chase Seibert