Comment créer un tableau arborescent rétractable en html/css/js ?

Question

J'ai des données à afficher qui sont à la fois tabulaires et hiérarchiques. J'aimerais que l'utilisateur puisse développer et réduire les nœuds.

Un peu comme ça, mais fonctionnel :

http://www.maxdesign.com.au/articles/tree-table/

Quelle serait la meilleure façon d'aborder cette question ? Je ne suis pas opposé à l'utilisation d'un plugin standard.

Answer 1

Vous pouvez essayer Grille d'arbre jQuery ( http://maxazan.github.io/jquery-treegrid/ ) ou jQuery treetable ( http://ludo.cubicphuse.nl/jquery-treetable/ )

Les deux utilisent le HTML <table> et stylisé l'arbre.

El jQuery treetable utilise data-tt-id y data-tt-parent-id pour déterminer le parent et l'enfant de l'arbre. Exemple d'utilisation :

<table id="tree">
  <tr data-tt-id="1">
    <td>Parent</td>
  </tr>
  <tr data-tt-id="2" data-tt-parent-id="1">
    <td>Child</td>
  </tr>
</table>
$("#tree").treetable({ expandable: true });

En attendant, Grille d'arbre jQuery utilise uniquement la classe pour styliser l'arbre. Exemple d'utilisation :

<table class="tree">
    <tr class="treegrid-1">
        <td>Root node</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-2 treegrid-parent-1">
        <td>Node 1-1</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-3 treegrid-parent-1">
        <td>Node 1-2</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-4 treegrid-parent-3">
        <td>Node 1-2-1</td><td>Additional info</td>
    </tr>
</table>
<script type="text/javascript">
  $('.tree').treegrid();
</script>