Remplir et mettre à jour une grille (ou une table) de forme étrange avec JQuery et AJAX

Question

J'ai une grille bizarre avec des colonnes de hauteur différentes. Je veux dire par là que la colonne 1 peut avoir 4 cases à remplir, la colonne 2 à 5 et la colonne 3 à 2. Pour les besoins de cette question, supposons qu'elles sont statiques et que les valeurs sont les suivantes:

Col | Height 
--------------- 
1   4 
2   3 
3   5 
4   2 
5   3 

Mon premier appel ajax retournera un tableau d'éléments. Chaque item aura un name et un url.

La fonction pour traiter l'appel initial ressemblera probablement quelque chose comme ceci:

var processJSONResult = function (data) { 

    myglob= data.data; 
    $.each(data.data, function(i, item){ 

    url = item.url; 
    name = item.name; 

    }); 
} 

Alors cela devient à la première question: Quel est le moyen le plus efficace pour remplir la grille au départ. Est-ce que j'ai un modèle html et juste le remplis un par un? Ou est-ce que je crée dynamiquement la grille et la remplis ensuite?

La deuxième partie de la question concerne la mise à jour. De temps en temps, la page lancera un appel ajax pour de nouvelles entrées. Si les entrées apparaissent, nous devrons aléatoirement (ou pas, mais je pense que c'est plus facile) les ajouter à la grille, en remplaçant l'une des anciennes entrées de la grille. Donc la deuxième question: Quelle est la meilleure méthode pour y arriver en tenant compte de ce que vous pensez être le mieux dans la première partie?

Je sais que c'est un doozy d'une question, alors merci à tous ceux qui prennent le temps de le regarder.

Answer 1

C'est en fait ce que je fini par faire

var populateFPTracks = function(data) 
{ 
    currentcounter=0; 
    //alert(data.data[1].track); 
    for (x=0; x < totalcols; x++) 
    { 
     var $colheight= Math.floor(Math.random()*6)+1; 
     for (y=0; y < $colheight; y++) 
     { 
      name = data.data[currenttrackcounter].track.name 
      url = data.data[currenttrackcounter].track.url 
      currenttrackcounter++; 
      $("#do_col"+x).append('<div class="do_trackbox"></div>'); 
     } 

    } 

Answer 2

Eh bien, car il est statique cela fonctionnerait ..

Disons que vous avez un document HTML avec une table complexe (imbriquée ou non ..) Tout ce que vous avez à faire est d'avoir un couple de < span id=“squareN”> où squaren est le nom ou le numéro de votre carré ..

alors votre serveur pourrait répondre la chaîne JSON suivante:

{“squareA":123, “squareB":456, “squareN":567} 

sur le côté client, tout ce que vous devez faire est:

$.getJSON("myserver.php", function(squareName, squareValue) 
{ $("#" + squareName).text(squareValue); }