11548 sujets

JavaScript, DOM et API Web HTML5

TreeTable/ TreeListView: Ca ne fonctionne pas

Bonjour!

Voila mon premier message sur ce beau forum, j'espère que je ne vais pas trop transgresser les règles.
Je souhaite réaliser une treeTable (une table dont on peut replier les lignes et ce de manière récursive sur plusieurs niveau) J'ai créé un script qui fonctionne parfaitement sur un niveau mais qui fait n'importe quoi quand il y a plusieurs niveaux d'imbrication. Je pense que le problème vient des TBody qui ne peuvent être imbriqués mais je ne vois pas par quoi les remplacer...
Voici un exemple du désatre:
<html>
  <head>
    <title>
      Ma super tree table qui ne fonctionne pas
    </title>
<script language="javascript">
function getItem(id)
{
var itm = false;
if(document.getElementById)
itm = document.getElementById(id);
else if(document.all)
itm = document.all[id];
else if(document.layers)
itm = document.layers[id];
return itm;
}
function toggleItem(id)
{
itm = getItem(id);
if(!itm)
return false;
if(itm.style.display == 'none')
itm.style.display = '';
else
itm.style.display = 'none';
return false;
}
</script>
    <style type="text/css"> body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin: 0; padding: 10; }.tbl { border-collapse: collapse; border-color: #6593CF; border-style: solid; border-width: 1px; font-size: 12px }.tbl td{ border-color: #6593CF; border-style: solid; border-width: 1px; }
    </style>
  </head>
  <body>
    <table class="tbl">
      <tr>
        <td>
          Task Id</td>
        <td>
          Name</td>
      </tr>
      <tr>
        <td>
          1</td>
        <td>
          <a href="#" onclick="toggleItem('t1')">[-]</a>
          Task 1</td>
      </tr>
      <tbody id="t1">
        <tr>
          <td>
            4</td>
          <td>
            Task 4</td>
        </tr>
        <tbody id="t4">
        </tbody>
      </tbody>
      <tr>
        <td>
          2</td>
        <td>
          <a href="#" onclick="toggleItem('t2')">[-]</a>
          Task 2</td>
      </tr>
      <tbody id="t2">
        <tr>
          <td>
            5</td>
          <td>
            <a href="#" onclick="toggleItem('t5')">[-]</a>
            Task 5</td>
        </tr>
        <tbody id="t5">
          <tr>
            <td>
              6</td>
            <td>
              Task 6</td>
          </tr>
          <tbody id="t6">
          </tbody>
          <tr>
            <td>
              7</td>
            <td>
              Task 7</td>
          </tr>
          <tbody id="t7">
          </tbody>
        </tbody>
      </tbody>
      <tr>
        <td>
          3</td>
        <td>
          Task 3</td>
      </tr>
      <tbody id="t3">
      </tbody>
    </table>
  </body>
</html>


Merci d'avance pour votre aide Smiley smile
En effet, les tbody ne peuvent être imbriquées.
Les tableaux imbriqués en entier sont possibles, mais ce n'est pas très recommandé.
Le mieux pour un treeview, à mon avis, c'est quand même les listes non ordonnées. Un tableau est-il vraiment nécessaire et utile ?
Bonsoir!
Merci pour ta réponse. Je veux bien utiliser des listes mais je ne vois pas trop comment faire pour avoir des colonnes. Il y a une astuce pour cela?
Si c'est un vrai treeview comme on l'entend habituellement, il ne devrait pas y avoir de colonnes...
Sinon alors c'est un truc genre explorateur windows que tu cherches : d'un côté le treeview avec les dossiers, et d'un autre les fichiers, avec des données triables par colonne.
Sujet clos
Aller à