Comment faire une "vue arborescente" spécifique

Michal S

Je veux créer une sorte d'arborescence, même si je ne sais pas si c'est le mot correct. J'en fais le dessin pour que vous compreniez ce que je veux dire. Fondamentalement, cela ressemble à une fleur à l'envers.vue supposée arborescente

Quelle est la meilleure façon de le faire? Pour chaque utilisateur enregistré sous utilisateur connecté, il devrait y avoir une nouvelle branche avec sa photo et son nom et le nombre de branches n'est pas limité. Je suppose que jQuery est la solution, mais je n'ai rien trouvé qui puisse m'aider. Je serais donc heureux de recevoir des liens ou des conseils pour les plugins jQuery ou tout autre conseil utile.

Sébastien

Je suis peut-être allé un peu trop loin avec cette réponse, mais ça a été amusant de tester certaines choses, alors j'ai créé une solution complète. La mise en page s'adapte aux changements de taille pour la plupart des éléments. J'ai essayé de rendre le CSS aussi facile à éditer que possible.

Tout ce que vous avez à faire est de dupliquer level_2_entry_containerautant de fois que vous le souhaitez. Cela peut être facilement accompli côté client ou côté serveur avec quelques lignes de code. La structure du contenu est la même pour les côtés gauche et droit (la direction et le positionnement sont contrôlés via CSS).

Testé sur les dernières versions Chrome et Firefox.

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #444;
}
.main_container {
    min-width: 400px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.solution_container {
    position: relative;
}
.flex_container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}
.flex_item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}
.flex_item_static {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
}
.level_1_entry_image {
    width: 160px; /* change according to preference */
    height: 160px; /* change according to preference */
    display: block;
    border-radius: 50%;
    box-sizing: border-box;
    border: solid 4px #eee;
    background-color: #eee;
}
.level_1_entry_content {
    padding-left: 20px; /* change according to preference - controls text distance from level_1_image */
}
.center_line {
    position: absolute;
    width: 4px;
    height: 100%;
    top: 0px;
    left: 50%;
    margin-left: -2px;
    background-color: #eee;
    z-index: 1;
}
.center_footer {
    position: absolute;
    width: 20px;
    height: 4px;
    bottom: 0px;
    left: 50%;
    margin-left: -10px;
    background-color: #eee;
    z-index: 1;
}
.level_2_entry_container {
    width: 50%;
    box-sizing: border-box;
    margin-top: -50px;
}
.level_2_entry_container:first-child {
    margin-top: 0px;
}
.level_2_entry_container:nth-child(odd) {
    margin-right: auto;
}
.level_2_entry_container:nth-child(even) {
    margin-left: auto;
}
.level_2_entry_image,
.level_2_entry_content {
    margin: 20px; /* change according to preference - controls level_2_image distance from central_line */
}
.level_2_entry_image {
    width: 100px; /* change according to preference */
    height: 100px; /* change according to preference */
    display: block;
    border-radius: 50%;
    box-sizing: border-box;
    border: solid 4px #eee;
    position: relative;
    z-index: 2;
    background-color: #eee;
}
.level_2_entry_container:nth-child(odd) .level_2_entry_image {
    margin-left: 0px !important;
    margin-bottom: 0px !important;
}
.level_2_entry_container:nth-child(even) .level_2_entry_image {
    margin-right: 0px !important;
    margin-bottom: 0px !important;
}
.level_2_entry_content {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    padding: 20px; /* change according to preference - controls text distance from level_2_image */
    padding-top: 0px;
    padding-bottom: 0px;
}
.level_2_entry_container:nth-child(odd) .level_2_entry_content {
    padding-left: 0px !important;
    text-align: right;
}
.level_2_entry_container:nth-child(even) .level_2_entry_content {
    padding-right: 0px !important;
    text-align: left;
}
.diagonal_line_1,
.diagonal_line_2 {
    position: absolute;
    width: 75%;
    height: 75%;
    z-index: 1;
    top: 0px;
}
.diagonal_line_1 {
    right: 0px;
}
.diagonal_line_2 {
    left: 0px;
}
.level_2_entry_container:nth-child(odd) .diagonal_line_2 {
    display: none;
}
.level_2_entry_container:nth-child(even) .diagonal_line_1 {
    display: none;
}
.level_2_entry_container:nth-child(odd) > .flex_container > .flex_item:nth-child(1) {
    order: 1;
}
.level_2_entry_container:nth-child(odd) > .flex_container > .flex_item:nth-child(2) {
    order: 2;
}
.level_2_entry_container:nth-child(even) > .flex_container > .flex_item:nth-child(1) {
    order: 2;
}
.level_2_entry_container:nth-child(even) > .flex_container > .flex_item:nth-child(2) {
    order: 1;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
    </head>
    <body>
        <div class="main_container">
            <div class="solution_container">
                <div class="flex_container">
                    <div class="flex_item"></div>
                    <div class="flex_item flex_item_static">
                        <img class="level_1_entry_image" src="http://placehold.it/320x320"/>
                    </div>
                    <div class="flex_item">
                        <div class="level_1_entry_content">Lorem ipsum dolor sit amet</div>
                    </div>
                </div>
                <div class="center_line"></div>
                <div class="center_footer"></div>
                <div class="level_2_container">
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Articles connexes

Comment créer une vue arborescente dans js

Ashutosh jha J'ai une donnée factice comme celle-ci j'ai besoin de créer un arbre comme celui-ci PDG UNE A1 A2 Mon mannequin ressemble à ça let d = [ { "name": "CEO", "parent": null, "id": "5847e80312896b2fa49ce428" },

Comment faire correspondre une colonne spécifique ?

Mendel j'ai deux fichiers Fichier_A.txt 1 730132 . CAAAAAAAAT CAAAAAAAAAT 77.917 . AB=0.333333;ABP=8.07707;AC=1;AF=0.5;AN=2;AO=7;CIGAR=1M1I9M;DP=21;DPB=22.1;DPRA=0;EPP=10.7656;EPPR=14.5915;GTI=0;LEN=1;MEANALT=2;MQM=60;MQMR=60;NS=1;NUMALT=1;ODDS=17.941

Comment faire faire quelque chose à une div spécifique ?

Amir Bashiri <!DOCTYPE html> <head> <title>Document</title> </head> <body> <div class="container"> <div class="gethover"></div> <div class="gethover"></div> <div class="gethover"></div> <div class="gethover"></div> </div> </body> </html>

comment faire une redirection vers une URL spécifique ?

AMC J'exécute opecart 3 avec le nouveau thème de journal 3. La page du produit comporte un bouton "achat rapide" qui ajoute automatiquement les détails du produit au panier, puis redirige le client vers la page de paiement. Je n'arrive pas à changer l'URL du b