/ / Affichage de données dans un modèle d'arborescence en HTML / CSS / JQuery - javascript, jquery, html, css, tree

Affichage de données dans un modèle d'arbre en HTML / CSS / JQuery - javascript, jquery, html, css, tree

Je cherche à afficher un très grand ensemble de données dans un modèle arborescent. Les nœuds peuvent avoir plusieurs enfants, ainsi que plusieurs parents. Idéalement, l’arborescence doit être dynamique car elle représente des données dynamiques.

J'ai jeté un coup d'oeil à quelques JS différentsdes bibliothèques telles que D3, Raphael, etc., et même si elles sont adaptées, je ne peux utiliser aucune bibliothèque JS autre que JQuery. Je recherche une solution utilisant uniquement HTML, CSS et JS / JQuery.

Le public unique est IE8.

Aucune suggestion?

Réponses:

3 pour la réponse № 1

Html lui-même est une représentation d'une arborescence. Chaque élément est un nœud et les éléments à l'intérieur d'un nœud sont des enfants et le nœud lui-même est un parent.

Si l'affichage des données est tout ce dont vous avez besoin, vous pouvez le faire comme suit:

<div> <-- Parent
<p>Data Node Parent</p> <-- Data
<div> <-- Child
<p>Data Node Child</p> <-- Child Data
</div>
</div>

Ensuite, utilisez des CSS pour l’appeler comme un arbre.

En utilisant jquery, vous pouvez traverser le dom (arbre) etajoutez les données à chacun de ces éléments et / ou créez les éléments de manière dynamique en fonction des données. Vous utiliseriez des méthodes telles que .next () .prev () .parent () .child ()

http://api.jquery.com/category/traversing/

http://api.jquery.com/category/manipulation/