3 pièce(s) jointe(s)
Créer une arborescence html depuis un objet javascript
Bonjour à tous !
Je n'ai pas vraiment l'habitude de demander de l'aide, d'habitude je cherche des pistes sur gogol mais là
j'ai pas vraiment trouvé de réponses adéquates.
Donc, ce que je voudrais faire c'est créer une vue d'arborescence à partir d'un objet qui contient des tableau d'objets
qui contiennent etc ...
j'ai donc un objet qui contient des tableaux d'objets (créer par JSon) qui se nomme cat_gen :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// structure d'exemple
cat_gen :[{titre: 'titre cat 1',
sub:[{ titre: 'titre 1 sous-cat 1}],
[{titre: 'titre 2 sous-cat 1',
sub:[{ titre: 'titre 1 sous-sous-cat 1'}]
}],
}],
[{titre: 'titre cat 2',
sub:[{ titre: 'titre 1 sous-cat 2'}],
[{titre: 'titre 2 sous-cat 2',
sub:[{ titre: 'titre 1 sous-sous-cat 2'}]
}],
}] |
Cet objet peut contenir des sous-catégories qui contiennent elles-même des sous-catégories etc ...
La structure est toujours la même -> titre et sub[] (si il y a un tableau de sous-cat (sub) sinon il n'y a que le titre.
Ce que je voudrais faire c'est créer des listes imbriquées, faire une arborescence quoi ...
Après le but c'est créer une arborescence comme avec des plug-in comme bootstrap-treeview (c'est ce que j'utilise déjà)
mais je ne suis pas satifait du résultat j'aimerais pouvoir gérer le retrait des sous-catégories, y incorporer des datas additionnels
(ils sont déjà présent dans l'objet originel) et créer une vue avec des images pour créer les lignes de correspondances et de retrait,
je sais pas si c'est clair, en gros une ligne verticale qui se termine par une flèche, bref une vue claire de l'arbo.
Mon test :
une fonction récusive
Code:
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
|
/*
* Funct rappelSub
* @param obj. sub parent
*/
rappelSub: function(obj, id) {
// ajouter un '<ul>' tag
$('li#'+id+'').append('<ul>');
// parcourir obj. 'sub'
obj.forEach(function(SUB, k){
// ajouter un '<li>' tag + titre
$('li#'+id+' ul').append('<li data-k="'+k+'" id='+SUB.nat+SUB.id+'>' + SUB.titre);
// si l'obj. 'sub' contient lui aussi des sous-objets
if(SUB.sub){
//on appelle la fonction rappelSub qui est récursive,
// on lui passe en paramètre la clé du parent et l'id du Sub
$.loi.rappelSub(SUB.sub, SUB.nat+SUB.id);
}
// fermer '</li>' tag
$('li#'+id+' ul').append('</li>');
}); // fin boucle
// fermer un '</ul>' tag
$('li#'+id+'').append('</ul>');
} |
Et un script qui parcours l'objet cat_gen :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$.m.group.work.cat_gen.forEach(function(item, k){
// insérer en premier <li> début de liste
$('#test').append('<ul><li id="cat'+item.id+'">' + item.titre);
// si l'item contient un sous-objet 'sub'
if(item.sub){
//on appelle la fonction rappelSub qui est récursive,
// on lui passe en paramètre la clé du parent et l'id du Sub
$.loi.rappelSub(item.sub, 'cat'+item.id+'');
}
// inérer en dernier le </li> fin de liste
$('#test').append('</li></ul>');
}); |
Pour l'instant je liste beaucoup trop de choses, je pense que je dois compter chaque objet sub et faire des boucles en conséquence ...
Ca fonctionne bien dans le sens où je n'ai que trois niveaux, mais quand j'en ajoute un quatrième (il peut y en avoir une infinité),
ça me rappelle toutes les autres cat/sous-cat des objets parcourus précédemment ...
Le but final étant de créer une arborescence qui affiche les premiers parents (les catégories générales) et qui affiche
les sous-cat. collapsées (par boostraps par ex.) lorsqu'on clique dessus, au final avoir un icône (font-awsome) selon les datas,
un titre avec onclick="" pour aller chercher la sous-cat et une étiquette (tag) selon datas ...
Pourquoi pas créer un véritable plug-in jQuery à la fin et le partager avec tous.
Pour être plus clair voici un exemple réalisé avec bootstrap-treeview.js mais je ne suis pas satisfait du résultat,
il n'y a pas de lignes verticales et mes derniers items ne dervais pas s'afficher sous forme de lien ...
j'ai modifié bootstrap-treeview.js pour arriver à ce résultat mais je comprend mal leur logique (leur code) afin de personnaliser entièrement le schmilblik.
Vues en prod. :
Pièce jointe 364996
Pièce jointe 364999
Pièce jointe 365003
Merci de votre aide,
cordialement,
Raf
