it-swarm-tr.com

JQuery kullanarak anında bir HTML tablosu oluşturma

Aşağıda (bir sunucudan alınan JSON verilerini kullanarak) anında bir HTML tablosu oluşturmak için kullandığım kod.

Veri yüklenirken animasyonlu bir pleasewait (.gif) grafiği görüntüler. Ancak, JavaScript işlevi tabloyu oluştururken grafik donuyor. İlk başta, bunun gerçekleşmesinden mutlu oldum (masayı göster), sanırım şimdi verimlilik üzerine çalışmam gerekiyor. En azından animasyonlu grafiğin donmasını önlemeliyim. Statik bir "Yükleniyor" ekranına gidebilirim, ancak bu metodu çalıştırmayı tercih ederim.

Pleasewait ekranım için öneriler? Ve verimlilik? Masayı kurmanın daha iyi bir yolu olabilir mi? Ya da belki bir masa değil, ekran gibi başka bir "masa"

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

Temel olarak döngülerinizi kurmak istersiniz, böylece sık sık diğer dişlere geçerler. Kullanıcı arabiriminizi dondurmadan CPU yoğun işlemlerin çalıştırılması konusunda bu makale kodundan bazı örnek kodlar:

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

Komut dosyanızdaki HTML üretimini kolaylaştırmak için, eğer jQuery kullanıyorsanız, bir deneme sürümü Basit Şablonlar eklentisini verebilirsiniz. Yapmanız gereken birleştirme sayısını büyük ölçüde azaltarak süreci hızlandırır. Son zamanlarda, oldukça büyük hız artışı ile sonuçlanan bazı refactoring işlemleri yaptıktan sonra oldukça iyi bir performans sergiliyor. İşte size bir örnek (işin tümünü yapmadan sizin için!):

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

Ne tarif ettiğinizi gerçekleştirmek için JTemplates kullanıyorum. Dave Ward blogunda bir örnek var here . JTemplates’in ana avantajı, html’nizin javascript'inize dokunmamış olmasıdır. Bir şablon yazarsınız ve jTemplate'in html'yi şablonunuzdan ve json'unuzdan oluşturması için iki işlevi çağırırsınız.

11
Guichard

İnnerHTML kullanmak, jQuery'nin innerHTML kullanan ancak girdiler üzerinde çok fazla işlem yapan HTML-DOM-ifier öğesini kullanmaktan kesinlikle daha hızlı olabilir.

JavaScript nesnelerinden tabloları ve diğer yinelenen veri yapılarını hızla oluşturmanın bir yolu olarak chain.js 'yi kontrol etmenizi öneririm. JQuery için gerçekten hafif, akıllı bir veri tabanı eklentisi.

3
bhollis

Yaptığınız şey bir dize oluşturmak ve daha sonra yerleştirmeden sonra hepsini tek seferde ayrıştırmaktır. Gerçek bir tablo elemanı (yani, $("<table>")) oluşturup ardından her bir satırı sırayla eklemeye ne dersiniz? Sayfayı gerçekten eklediğiniz zaman, DOM düğümlerinin hepsi inşa edilmiş olacak, bu yüzden büyük bir hit olmamalıdır.

3
Jim

Yeni başlayanlar için, flydom 'a ve türevlerine bakın, son derece yardımcı olurlar. Daha fazla içerik verebilir misiniz? Bu, yükte değilse ve sayfaya henüz yapıştırıldıysa, her şeyi $ (function () {/ * code * /}) biçiminde sarmanız, muhtemelen, yaşadığınız sorunları temizler. Satır içi JS hemen çalıştırılır, bu da tablo için bu döngü anlamına gelir. aşırı yük bir olaydır ve esasen “müstakil” dir.

0
neouser99

Web'de JavaScript ve StringBuilder için arama yapın. Bir JavaScript dizge oluşturucunuz olduğunda, her bir birleştirme için .append yöntemini kullandığınızdan emin olun. Yani, herhangi bir + birleşimine sahip olmak istemezsiniz. Bundan sonra, JavaScript'i arayın ve değiştirin. innerHTML yerine bu işlevi kullanın.

0
Andrew

Benim deneyimim, iki ayrı gecikme olduğu olmuştur. Biri tüm bu dizeleri bir araya getiriyor. Diğeri, tarayıcı gerçekten dizgiyi oluşturmaya çalıştığında gerçekleşir. Genelde, UI donmasıyla ilgili en fazla sorun yaşayan IE, kısmen javascript'i çalıştırmada çok daha yavaş olduğu için. IE8'de bu daha iyi olmalı.

Sizin durumunuzda önereceğim şey operasyonu adımlara bölmek. 100 satırlık bir tablo için, geçerli bir 10 satırlık tablo hazırlarsınız. Ardından UI engellemeyi durduracak şekilde kontrolü tarayıcıya geri döndürmek için bir tarama ve bir setTimeout kullanın. SetTimeout geri döndüğünde, sonraki 10 satırı vb.

DOM kullanarak tablo oluşturmak kesinlikle diğerlerinin söylediği gibi "temiz" tir. Ancak, performans açısından ödenecek dik bir bedel var. Kendinizin çalıştırabileceği bazı kriterleri olan bu konuyla ilgili mükemmel quirksmode makalesine bakın.

Uzun lafın kısası, innerHTML modern JS motorlarında bile DOM'den çok daha hızlıdır.

0
Chase Seibert