Contenu dynamique en 2 colonnes (plutôt qu'une!)

J'ai une table qui affiche les données à partir du contenu dynamique dans 1 colonne. Je voudrais que le contenu passe à une deuxième colonne lorsque le nombre de cellules est> 3. (c.-à-d. s'il y a 3 cellules à afficher, il serait affiché dans 1 col, et 4 cellules ou plus, il serait affiché dans 2 colonnes.Notez que le contenu dynamique ne dépassera jamais 6 cellulesContenu dynamique en 2 colonnes (plutôt qu'une!)

J'ai dire que je peux trouver mon chemin avec html mais css et javascript est une autre question ... mais je me rends bien compte qu'il pourrait être le seul moyen.

Tous Javascript, le script jQuery disponible pour obtenir mon résultat?

données à afficher comme suit:

| Col1 |   | Col1 || Col2 | 
---------   ----------------- 
| Data1 | ----> | Data1 || Data4 | 
| Data2 |   | Data2 | etc... 
| Data3 |   | Data3 |

Vous ne savez pas si s aiderions mais le code d'appel du contenu dynamique (et de le mettre dans le tableau) est la suivante:

<table id="myTable"> 
        <?php 
    $str1=""; 
    $flag1=1; 
    while($rowReview1=mysql_fetch_array($resultReview1)){ 
     $st1=""; 
     $val=$rowReview1["ratingValue"]; 
     $sName=$rowReview1["criteriaName"]; 

     if($val>0){ 

     for($ii=1;$ii<=$val;$ii++){ 
     $st1.="<img src=\"$directory/images/orange.gif\" \>"; 
     } 

     for($jj=$val;$jj<5;$jj++){ 
     $st1.="<img src=\"$directory/images/gray.gif\" \>"; 
     } 
     }else{ 
     $st1=""; 
     } 

     if($val > 0){ 
     $str1.="<tr><td>$sName</td><td>$st1</td></tr>"; 
     }else{ 
     $str1.="<tr><td>$sName</td><td>N/A</td></tr>"; 
     } 
    } 
    echo $str1; 
    ?> 
       </table>

La page peut maintenant être vu en direct ici: http://www.top10banques.com/avis/index2.php?item_id=1 Les tableaux que je suis en train de modifier sont ceux sous le saut de page "l'évaluation des clients".

Merci encore pour toute aide que vous pourriez fournir et bonnes fêtes à tous!

Source

2009-12-24 Tioneb

En supposant que vous utilisez la structure de table standard, d'abord je mettrais toutes vos données dans une colonne, quel que soit le nombre. Ensuite, je voudrais les déplacer dynamiquement:

EDIT Voici un exemple de ce que vous essayez de faire. Le problème était que vous avez deux cellules div par ligne, Je croyais que vous aviez seulement un:

<html> 
<head> 
    <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> 
    </script> 
</head> 
<body> 
    <script type="text/javascript"> 
     $(function(){ 
var allRows = $('#myTable tr'); 
if(allRows.length > 3) { 
    var extraData = $('#myTable tr:gt(2) td') 
    var j = 0;  
    for (i=0;i<extraData.length/2;i++) { 
     $(allRows[i]).append(extraData[j]) 
     $(allRows[i]).append(extraData[j+1]) 
     j=j+2; 
    } 
    $('#myTable tr:gt(2)').remove(); 
} 
}); 
</script> 

<table id="myTable"> 
<tr><td>Data1</td><td>Data11</td></tr> 
<tr><td>Data2</td><td>Data21</td></tr> 
<tr><td>Data3</td><td>Data31</td></tr> 
<tr><td>Data4</td><td>Data41</td></tr> 
<tr><td>Data5</td><td>Data51</td></tr> 
<tr><td>Data6</td><td>Data61</td></tr> 
</table> 

</body> 
</html>

NOTE la solution ci-dessus ne fonctionnera à vos spécifications exactes . Si vous voulez que ce soit réutilisable (c'est-à-dire, qu'il prenne n'importe quel nombre de lignes avec n'importe quel nombre de cellules), vous devrez peut-être faire quelques ajustements supplémentaires.

MISE À JOUR DE TRAVAIL POUR PLUSIEURS TABLES

Voir le code que j'ai posté ici sur Pastie: http://pastie.org/755963

Notez que les tables sont maintenant référencées par les classes au lieu de ids. Aussi, je veux dire que je suis d'accord que cette solution pourrait ( (et peut-être devrait) être traitée côté serveur, je réponds simplement à la question comme l'OP a demandé ...

Source

2009-12-24 01:26:59 Jason

Oh ... Désolé pour la mauvaise relecture et le manque de clarification. Je regarde quelque chose comme votre premier exemple (Col1 si <4 cellules à afficher, Col1 et Col2 pour> 3 cellules). Merci d'avoir aidé Jason! ;-) – Tioneb

FWIW le code de rendu dans la question et la réponse ressemble exactement la même chose pour moi ... –

@emddudley - c'est parce que je l'ai mis là après avoir répondu, puis je suis allé à ajouter ma réponse :) – Jason

Je construirais probablement un objet JSON avec ces données dans le PHP au lieu de l'injecter dans le DOM à tous au début. De cette façon, vous n'avez pas la surcharge du javascript restructurant les données existantes dans le DOM, c'est juste le positionner de zéro.

Source

2009-12-24 04:59:11 slant

J'aurais pensé que ce serait simple en utilisant CSS (mais je ne suis pas un expert CSS).

Quelque chose comme ça traite d'un cas plus générique en PHP:

function multi_columns($inp_array) 
    { 
    $max_cols=4; 
    $target_rows=3; 

    if (count($dyn)>$max_cols*$target_rows) { 
     // won't fit in this number of cols/rows 
     // add more rows 
     $rows=count($dyn)/$max_cols; 
     $target_rows= ($rows==(integer)$rows) ? $rows : $rows+1; 
    } elseif (count($dyn)>$max_cols*$target_rows) { 
     // reduce to number of cols needed 
     $cols=count($dyn)/$target_rows; 
     $max_cols= ($cols==(integer)$cols) ? $cols : $max_cols; 
    } 

    print "<table>\n"; 
    for ($y=1; $y<=$target_rows; $y++) { 
     print "<tr>\n"; 
     for ($x=1; $x<=$max_cols; $x++) { 
      print "<td>"; 
      if (array_key_exists($y+$x*$target_rows, $inp_array)) { 
       print $inp_array[$y+$x*$target_rows]; 
      } 
      print "</td>"; 
     } 
     print "</tr>\n"; 
    } 
    print "</table>\n"; 
    }

Source

2009-12-24 11:09:30 symcbean

Salut Symcbean, j'aime encore mieux cette solution, mais je n'arrive pas à la faire fonctionner correctement avec mes tables ... Et j'ai peut-être tort mais je ne pense pas pouvoir le faire avec css ... – Tioneb

le code est un peu bogué - essayez de remplacer les références à $ dyn par $ inp_array, et utilisez 0 pour le point de départ dans les boucles $ x et $ y. C. – symcbean

Ce problème demande à être résolu au niveau du serveur et d'améliorer les performances de la page en éliminant un script JavaScript.

Deuxièmement, vous pouvez simplifier la vie en n'utilisant une table, mais plutôt de les div. Regardons d'abord une structure de données proposée.

Nous allons conserver toutes les sorties dans un tableau depuis que vous utilisez PHP.

$data=array[0...n];

Cela trie simplement la génération de logique métier. Maintenant, regardons la logique de présentation, d'abord visuellement les divs proposées!

$ data_length = m

j=0 j=1 j=2 j=3 ..... j= x 

i=0 [1] [4] [7] [10]  [] 

i=1 [2] [5] [8] [11]  [] 

i=2 [3] [6] [9] [12]  [] 

y []  [] []  []   []

Tous les divs seront flottaient gauche. Une div d'effacement sera imprimée une fois la ligne terminée.

Maintenant nous devons définir les relations de nos données par rapport à la position. Un peu d'observation de la table, montre que toutes les valeurs de position horizontale sont séparées par 3 et tous verticale par un (autrement dit, nous devons itérer sur notre tableau de données de $ dans les étapes de trois!), Flottant efficacement nos divs comme suit:

j=0 j=1 j=2 j=3 ..... j= x 

i=0 [1] [4] [7] [10] []

algorithme pseudo

$imax=2;      // spec 
$number_cells = m/imax  // total number of cells 
$jmax=$number_cells/3  // check rounding etc left out at this stage 
           // you can use mod % to see if there are 
           // remainders etc.. on second script iteration

Et maintenant pour l'itération

for ($i=0;$i<$imax-1;$i++){ 
    for ($j=0;$j<$jmax;$j++){ 
     $out.=wrap_in_div($data[($j*3)+(i+1)]); 
    } 
}

Notez que je ne l'ai pas pris la peine de définir la fonction mettre wrap_in_div comme c'est trivial.

Espérons que ça aide Joyeux Noël! Le programme était hors de ma tête alors s'il vous plaît traduire le pseudo-code en $ réel! :)

Source

2009-12-24 19:23:15 yannis

en fait, il ne devrait pas être divs parce que ce sont des données tabulaires ... les tableaux sont puissants pour ce qu'ils sont censés faire, ce qui est l'affichage des données tabulaires. – Jason

Personne ne doute que les tableaux sont puissants pour les données, j'ai utilisé les divs parce qu'il était plus facile de montrer l'algo et de suggérer des façons de séparer la présentation de la logique – yannis

Contenu dynamique en 2 colonnes (plutôt qu'une!)

Répondre

Questions connexes