2011-10-05 22 views
9

Czy jest to skuteczny sposób wypełniania tabeli danymi JSON przy użyciu jQuery, czy jest lepszy/mniej kosztowny sposób? Maksymalna liczba wierszy wynosi około 100. Wolałbym nie używać wtyczki.Wypełnianie tabeli z JSON za pomocą jQuery

JS:

$.ajax({ 
    url: 'public.json', 
    dataType: 'json', 
    success: function(data) { 
     var row = '<tr class="header">'; 
     for (var i in data.headers) { 
      row += '<th style=""><a href="#" class="sort"><span>' + data.headers[i] + '</span></a></th>'; 
     } 
     row += '</tr>' 
     $(row).appendTo('table.data'); 
     row = ''; 
     for (var i in data.rows) { 
      row += '<tr id="' + i + '">'; 
      row += '<td>' + data.rows[i].date + '</td>'; 
      row += '<td>' + data.rows[i].company + '</td>'; 
      row += '<td>' + data.rows[i].location + '</td>'; 
      ... 
      row += '</tr>'; 
     } 
     $(row).appendTo('table.data'); 
    }, 
}); 

JSON:

{ 
    "headers": { 
     "date": "Date", 
     "company": "Company", 
     "location": "Location", 
     ... 
    }, 
    "rows": [{ 
     "date": "09/18/2011", 
     "company": "Company name", 
     "location": "US", 
     ... 
    }, 
    ... 
} 

EDIT: Zasadniczo, próbuję dowiedzieć się, czy lumping wszystkie wiersze na sznurku, przekształcając go w obiekt jQuery a następnie dołączenie go do tabeli jest dobrym pomysłem, zakładając, że można to zrobić wiele razy na stronie, aby odświeżyć dane.

+0

Czy spojrzał na szablonach jQuery - http: //api.jquery .com/category/plugins/templates /? –

+0

Nie sądzę, że dobrze jest zaproponować używanie wtyczki w wersji beta i może ona ulec zmianie ze względów produkcyjnych. – MacMac

+0

@Floyd "Te tematy dokumentacji dotyczą wtyczki jQuery Templates ** **. PO stwierdził, że nie chce ich używać. – Bojangles

Odpowiedz

7

Zamiast for .. in składni i sznurek budynku, chciałbym użyć jQuery.each() function

tak:

$.ajax({ 
    url: 'public.json', 
    dataType: 'json', 
    success: function(data) { 
     var $tr =$('<tr>').addClass('header'); 
     $.each(data.headers, function(i,header){ 
      $tr.append($('<th>').append($('a').addClass('sort').attr('href','#').append($('span').text(header)))); 
     }); 
     $tr.appendTo('table.data'); 
     $.each(data.rows,function(i,row){ 
      $('<tr>').attr('id',i). 
       append($('<td>').text(row.date)). 
       append($('<td>').text(row.company)). 
       append($('<td>').text(row.location)).appendTo('table.data'); 
     }); 
    } 
}); 
+1

Jaka jest korzyść z używania $ .each zamiast for ... in? Miałem wrażenie, że $ .each jest droższe niż dla ... w. – Alex

+0

Masz rację. Nie wiedziałem tego. Możesz użyć jQuery zamiast budowania ciągów, ale ponieważ twoje pytanie dotyczy kosztowności, domyślam się, że twój kod jest w porządku ... http://jsperf.com/jquery-each-vs-for-loop/6 –

Powiązane problemy