Arbre généalogique généré petit à petit

**encoremoi21258** · 19/01/2021, 15h05

Bonjour,

Je souhaite faire une sorte d'arbre généalogique qui se génère petit à petit. Ce serait en HTML CSS JavaScript.

Au début on aurait ça:

Nom : img1.png
Affichages : 1147
Taille : 1,2 Ko

Nom : img1.png
Affichages : 1147
Taille : 1,2 Ko

Puis quand on clique sur le + ça récupère les données pour la suite:

Nom : img2.png
Affichages : 1170
Taille : 4,3 Ko

Mais je n'arrive pas à trouver une manière d'ajouter les "branches" et de déplacer toutes les cases de façon à ce que tout soit bien ordonné et aligné, puisqu'une branche peut être plus longue qu'une autre.

Auriez vous une idée ?

Merci d'avance

**mathieu** · 19/01/2021, 15h55

est ce que vous avez déjà fait une maquette en HTML du résultat que vous voulez avec 4 ou 5 cases par exemple ?

**javatwister** · 20/01/2021, 16h52

Je pense qu'un treeview de type JSON (par exemple) serait une bonne base;

**javatwister** · 21/01/2021, 18h42

Exemple peu esthétique, pour le principe: http://javatwist.imingo.net/arbre.htm

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Arbre</title>
 
<style>
.cache{display:none}
.pointer{cursor:pointer}
</style>
 
</head>
 
<body>
 
<div id="famille"></div>
 
<script>
const tab={
        "Marianne":{
                "Michel":{
                        "Marc":{
                                "Momo":{
                                        "Mauricette":null,
                                        "Mathis":"Marthe"
                                },
                                "Maurice":{
                                        "Michou":"Manon"
                                }
                        }
                },
                "Martine":"Morgane",
                "Maya":null,
                "Madeleine":{
                        "Mehdi":null,
                        "Maxime":{
                                "Maelis":null,
                                "Marius":{
                                        "Marguerite":null,
                                        "Marjorie":"Maud",
                                        "Magalie":null
                                }
                        }
                }
        }
}
 
document.addEventListener("DOMContentLoaded",()=>{
        let li0=document.createElement("li"),
        sp0=document.createElement("span"),
        ul0=document.createElement("ul");
        
        document.getElementById("famille").append(ul0);
        
        const run=(t,ref)=>{
                if(typeof t=="object"){
                        for(let i in t){
                                let li=li0.cloneNode(),
                                sp=sp0.cloneNode();
                                sp.textContent=i;
                                sp.addEventListener("click",(e)=>{
                                        if(e.target.nextSibling){
                                                e.target.nextSibling.classList.toggle("cache");
                                                if(sp.textContent.indexOf("+")!=-1){
                                                        sp.textContent=sp.textContent.replace("+","-")
                                                }
                                                else{
                                                        sp.textContent=sp.textContent.replace("-","+")
                                                }
                                        }
                                });
                                ref.append(li);
                                li.append(sp);
                                if(t[i]!=null){
                                        let ul=ul0.cloneNode();
                                        ul.classList.add("cache");
                                        li.append(ul);
                                        sp.textContent+=" + ";
                                        sp.classList.add("pointer");
                                        run(t[i],ul)
                                }
                                else{
                                        run(t[i],ref)
                                }
                        }
                }
                else{                   
                        let li=li0.cloneNode(),
                        sp=sp0.cloneNode();
                        sp.textContent=t;
 
                        ref.append(li);
                        li.append(sp);
                }
        }
        run(tab,document.querySelector("#famille ul"))
        document.querySelectorAll("#famille ul")[0].classList.remove("cache");
})
 
</script>
</body>
</html>

**encoremoi21258** · 22/01/2021, 20h33

Bonjour,

L'arbre proposé par javatwister est ce qu'il me faut, puisque le placement s'adapte automatiquement au nombre et à la longueur des branches.

De base il devait s'afficher un rectangle avec un titre et une image, un peu comme ça: https://codepen.io/jejedu67/pen/qBaGryW

Mais je me rends compte que ça surchargerait la page. De plus, il y a trop de données à récupérer et le chargement de la page serait donc bien trop long.

Mon idée est donc de n'afficher que du texte, comme sur http://javatwist.imingo.net/arbre.htm et à côté à chaque fois on peut mettre l'image d'un oeil. Lors du clique sur cette image d'un oeil, une fenêtre modale s'affiche par dessus le tout. Dans cette fenêtre modale il y aurait donc la place pour tout mettre.

Là où ça se complique c'est la récupération des données ...

Dans mon cas il faudrait que seul le premier titre soit affiché sur la page, avec donc un oeil à côté. Lors du clique sur cette image d'un oeil, une fonction javascript se lance pour récupérer les données, par exemple RecupererDonnees("5cssd6"), la récupération je sais faire, l'affichage de la modale aussi. En fonction du paramètre le site saura les données à récupérer. Comme sur l'exemple, il y aurait aussi un "+" affiché pour voir la suite. Ce "+" aurait également un event clique qui lance une fonction afin de récupérer la suite de la "branche" et du coup s'il y a une suite, pour afficher la suite.

J'ai réussi à faire ça:
https://codepen.io/jejedu67/pen/QWKRgNw

Très vite se pose un problème car les id se répètent vu que ce n'est qu'un simple test, mais ça fonctionne enfin comme il faut. Merci beaucoup à javatwister pour m'avoir donné la façon de présenter l'arbre. Via une boucle javascript je vais à chaque fois pouvoir ajouter autant de <li> que nécessaire en mettant à chaque fois un id unique.

**javatwister** · 23/01/2021, 07h38

Petite maj pour tracer les ancêtres jusqu'au tronc (et corriger 2 ou 3 bêtises):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Arbre</title>
 
<style>
.cache{display:none;}
.pointer{cursor:pointer;}
.red{background:red;}
li{margin:15px;display:flex;align-items:center;justify-content:flex-start;}
#famille div{width:120px;}
</style>
 
</head>
 
<body>
 
<div id="famille"></div>
 
<script>
const tab={
        "Marianne":{
                "Michel":{
                        "Marc":{
                                "Momo":{
                                        "Mauricette":null,
                                        "Mathis":"Marthe"
                                },
                                "Maurice":{
                                        "Michou":"Manon",
                                        "Manuela":{
                                                "Manolo":"Manu"
                                        }
                                }
                        }
                },
                "Martine":"Morgane",
                "Maya":null,
                "Madeleine":{
                        "Mehdi":null,
                        "Maxime":{
                                "Maelis":null,
                                "Marius":{
                                        "Marguerite":null,
                                        "Marjorie":"Maud",
                                        "Magalie":null
                                }
                        }
                }
        }
}
 
document.addEventListener("DOMContentLoaded",()=>{
        let li0=document.createElement("li"),
        div0=document.createElement("div"),
        sp0=document.createElement("span"),
        ul0=document.createElement("ul");
        
        document.getElementById("famille").append(ul0);
        
// coloration des ascendants
        const col=ind=>{
                ind.addEventListener("mouseover",()=> {
                        for(i=3;i<ind.id.length+1;i++){
                                document.getElementById(ind.id.substring(0,i)).classList.add("red");
                        }
                })
                ind.addEventListener("mouseout",()=> {
                        for(i=3;i<ind.id.length+1;i++){
                                document.getElementById(ind.id.substring(0,i)).classList.remove("red");
                        }
                })
        };
        
// création de l'arbre dom
        const run=(t,ref,pre)=>{
// pour les ancêtres
                if(typeof t=="object"){
                        let num=0;
                        for(let i in t){num++;
                                let li=li0.cloneNode(),
                                div=div0.cloneNode(),
                                sp=sp0.cloneNode();
                                sp.textContent=i;
                                
// masquage / affichage des descendants
                                sp.addEventListener("click",(e)=>{
                                        if(e.target.parentElement.nextSibling){
                                                e.target.parentElement.nextSibling.classList.toggle("cache");
                                                if(sp.textContent.indexOf("+")!=-1){
                                                        sp.textContent=sp.textContent.replace("+","-")
                                                }
                                                else{
                                                        sp.textContent=sp.textContent.replace("-","+")
                                                }
                                        }
                                });
                                ref.append(li);
                                li.append(div);
                                sp.id="id"+pre+num;
                                div.append(sp);
                                col(sp)
 
// membres avec enfants
                                if(t[i]!=null){
                                        let ul=ul0.cloneNode();
                                        ul.classList.add("cache");
                                        li.append(ul);
                                        sp.textContent+=" +";
                                        sp.classList.add("pointer");
                                        run(t[i],ul,pre+num)
                                }
                        }
                }
// membres sans enfant
                else{                   
                        let li=li0.cloneNode(),
                        div=div0.cloneNode(),
                        sp=sp0.cloneNode();
                        sp.textContent=t;
                        sp.id="id"+pre+1;
                        ref.append(li);
                        li.append(div);
                        div.append(sp);
                        col(sp)
                }
        }
        
        run(tab,document.querySelector("#famille ul"),"")
        document.querySelectorAll("#famille ul")[0].classList.remove("cache");
})
 
</script>
</body>
</html>

Arbre généalogique généré petit à petit

JavaScript

Discussions similaires

Partager

Partager