Réaliser un tree table multi niveau

**lnquaidorsay** · 08/01/2020, 15h05

Bonjour à tous,

J'aimerai créer un tableau multi niveau en avec jquery.

mais mon icône s'affiche deux fois et je n'arrive pas à faire plusieurs sous niveau.

ci dessous mon code

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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html>
 
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Dept Emp</title>
 
   <link type='text/css' href='app/webroot/css/bootstrap/4.3.1/bootstrap.min.css' rel='stylesheet' />
   <link type='text/css' href='app/webroot/css/font-awesome/4.7/css/font-awesome.min.css' rel='stylesheet' />
   <link type='text/css' href="app/webroot/css/jquery-ui.min.css" type="text/css" />
   <link type='text/css' href="app/webroot/css/typeahead.css" type="text/css" />
   <link type='text/css' href="app/webroot/css/bootstrap-tagsinput.css" type="text/css" />
   <script src="app/webroot/js/jquery.min.js"></script>
   <!-- <script type="text/javascript" src="app/webroot/js/bootstrap/4.3.1/bootstrap.min.js"></script> -->
   <!-- jQuery UI CSS -->
   <link href="app/webroot/css/jquery-ui.css" type="text/css" rel="stylesheet">
   <!-- Tokenfield CSS -->
   <link href="app/webroot/css/bootstrap-tokenfield.css" type="text/css" rel="stylesheet"> <!-- Download link : https://www.htmllion.com/bootstrap-tokenfield-jQuery-tag-token-input-plugin.html Doc bootstrap tokenfield : https://sliptree.github.io/bootstrap-tokenfield/ -->
 
</head>
 
<body>
   <div id="container">
      <div id="content">
         <div class="container">
            <div class="row">
               <div class="row">
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                     <div class="jumbotron">
                        <h1 class="display-4">Employe Dept</h1>
                        <h1 class="display-4">Recherche departement</h1>
                        <p class="lead"></p>
 
                  </div>
               </div>
            </div>
            <div class="row mb-2">
               <div class="row mb-2">
                  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                     <input type='text' id='jobs' name='job' value='' class='form-control' value="red,green,blue">
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                     <input id="reinit" class="btn btn-primary" type="button" value="REINITIALISER" style="float:left">
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                     <input id="search" class="btn btn-primary" type="button" value="RECHERCHER">
                  </div>
               </div>
            </div>
            <div class="row">
               <div id="reinit2" class="col-lg-3 col-md-6 col-sm-12 col-xs-12 " role="button">
                  <div class="row ">
                     <table id="user_data" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                           <tr class="header">
                              <th style="width:100px">Nom Employe</th>
                              <th style="width:100px">Adresse Employe</th>
                              <th style="width:100px">Bloc fonctionnel</th>
                              <th style="width:100px">Etat</th>
                           </tr>
                        </thead>
                        <tbody>
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div id="footer"></div>
 
   </div>
   <script type="text/javascript" src="app/webroot/js/jquery-1.12.4.min.js"></script>
   <script type="text/javascript" src="app/webroot/js/bootstrap/4.3.1/bootstrap.min.js"></script>
   <script type="text/javascript" src="app/webroot/js/jquery-ui.js"></script>
   <script type="text/javascript" src="app/webroot/js/bootstrap-tokenfield.js"></script>
 
   <script>
 
    var jsonData = '[{"id":"ajson1","parent":"#","level":"1", "name":"job1","adr":"part1","bloc":"bloc1","etat":"Et1"},{"id":"ajson2","parent":"#","level":"1", "name":"job2","adr":"part2","bloc":"bloc2","etat":"Et2"},{"id":"ajson3","parent":"ajson2","level":"2", "name":"job21","adr":"part21","bloc":"bloc21","etat":"Et21"},{"id":"ajson4","parent":"ajson2","level":"2", "name":"job22","adr":"part22","bloc":"bloc22","etat":"Et22"}]';
 
    jsonData = $.parseJSON(jsonData);
 
    var trHTML = '';
    $.each(jsonData, function (i, item) {
        trHTML += '<tr data-id="'+item.id+'" data-parent="'+item.parent+'" data-level="'+item.level+'"><td data-column="name">' + item.name + '</td><td >' + item.adr +'</td><td >' + item.bloc + '</td><td >'+item.etat+'</td></tr>';
    });
    
    $('#user_data').append(trHTML);
 
    // Gestion de la tree table
 
   var
        $table = $('#user_data'),
        rows = $table.find('tr');
 
    rows.each(function (index, row) {
        var
            $row = $(row),
            level = $row.data('level'),
            id = $row.data('id'),
            $columnName = $row.find('td[data-column="name"]'),
            children = $table.find('tr[data-parent="' + id + '"]');
 
        if (children.length) {
            var expander = $columnName.prepend('' +
                '<span class="treegrid-expander  fa fa-chevron-right"></span>' +
                '');
 
            children.hide();
 
            expander.on('click', function (e) {
                var $target = $(e.target);
                if ($target.hasClass('fa fa-chevron-right')) {
                    $target
                        .removeClass('fa fa-chevron-right')
                        .addClass('fa fa-chevron-down');
 
                    children.show();
                } else {
                    $target
                        .removeClass('fa fa-chevron-down')
                        .addClass('fa fa-chevron-right');
 
                    reverseHide($table, $row);
                }
            });
        }
 
        $columnName.prepend('' +
            '<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
            '');
    });
 
    // Reverse hide all elements
    reverseHide = function (table, element) {
        var
            $element = $(element),
            id = $element.data('id'),
            children = table.find('tr[data-parent="' + id + '"]');
 
        if (children.length) {
            children.each(function (i, e) {
                reverseHide(table, e);
            });
 
            $element
                .find('.fa fa-chevron-down')
                .removeClass('fa fa-chevron-down')
                .addClass('fa fa-chevron-right');
 
            children.hide();
        }
    };
 
   
   </script>
 
</body>
 
</html>

Quelqu'un saurait m'indiquer comment faire.

**psychadelic** · 08/01/2020, 17h36

jquery-1.12. ça existe encore ?

Tu veux dire des <tables> inbiquées ? parce que des "tree table", perso je ne comprends pas...

mais si tu veux afficher des arborescences , vaut mieux utiliser des listes imbriquées, c'est plus simple et plus "propre" ( approprié )

**lnquaidorsay** · 08/01/2020, 19h24

Bonjour @psychadelic,

je veux afficher des arborescences de ce style.

mais si tu veux afficher des arborescences , vaut mieux utiliser des listes imbriquées, c'est plus simple et plus "propre" ( approprié )

=> As-tu un exemple à me proposer sous forme d'un tableau

**lnquaidorsay** · 09/01/2020, 17h24

Bonjour, j'aimerai faire une datatable qui m'affiche les infos de parents et des enfants.

Je me base sur le champ level_data qui indique la profondeur de niveau de l'enfant par rapport au parent.

level_data = 0 equivaut au père et level_data = 1 ou plus equivaut au niveau du fils.

Si le fils n'a pas des données, Faire un cellPadding sur toutes les colonnes du fils et afficher le message "Aucune donnée pour le fils".

Mon code ne marche pas, voici le lien.

http://live.datatables.net/hecedicu/1/edit

et l'exemple de mon datatable à atteindre en image voir pièce jointe

**NoSmoking** · 10/01/2020, 09h59

Bonjour,
tout d'abord inutile d'ouvrir une nouvelle discussion.

Point #1
Je me demande si la structure de ton « jsonEmploye » est bien adaptée !

J'aurais mis children directement enfant de father, cela me semble tellement logique

Code :

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
const data = [
  {
    "father": {
      "id": "A",
      "name": "AE",
      "adr": "ME11",
      "bloc": "bac",
      "etat": "W",
      "children": [
        {
          "id": "18694",
          "name": "AE",
          "adr": "ME11",
          "bloc": "bac",
          "etat": "C"
        },
        {
          "id": "18694",
          "name": "AE",
          "adr": "ME11",
          "bloc": "bac"
        },
        {
          "id": "18694",
          "name": "AE",
          "adr": "ME11",
          "bloc": "bac"
        }
      ]
    }
  },
  {
    "father": {
      "id": "A",
      "name": "AE",
      "adr": "ME11",
      "bloc": "bac",
      "etat": "W",
      "children": []
    }
  }
]

Il te suffit de tester si children && children.length pour écrire la suite de ton code.

Point #2
Il me semble là aussi que le passage par une liste <ul> est plus judicieux, dataTable ne me semble pas vraiment adaptée au rendu que tu veux avoir, ou alors regarder du côté de : Child rows (show extra / detailed information), mais là encore je ne suis pas convaincu !

Invité · 10/01/2020, 12h02

Bonjour,

le lien donné au message #4 ne correspond pas au code donné au message #1.

A mon avis la structure du json du message #1 est la mieux adaptée :

Code :

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

1
2
3
4
5
6
var jsonData = '[
	{"id":"ajson1","parent":"#","level":"1", "name":"job1","adr":"part1","bloc":"bloc1","etat":"Et1"},
	{"id":"ajson2","parent":"#","level":"1", "name":"job2","adr":"part2","bloc":"bloc2","etat":"Et2"},
	{"id":"ajson3","parent":"ajson2","level":"2", "name":"job21","adr":"part21","bloc":"bloc21","etat":"Et21"},
	{"id":"ajson4","parent":"ajson2","level":"2", "name":"job22","adr":"part22","bloc":"bloc22","etat":"Et22"}
	]';

Ensuite, pour afficher les bonnes lignes au clic sur la flèche, il suffit d'afficher celles dont l'attribut data-parent vaut l'id de la ligne cliquée.

Une solution : https://codepen.io/jreaux62/pen/XWJqWMp

Code :

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
"use strict";
 
var jsonData = [
  {"id":"ajson1","parent":"#","level":"1", "name":"job1","adr":"part1","bloc":"bloc1","etat":"Et1"},
  {"id":"ajson2","parent":"#","level":"1", "name":"job2","adr":"part2","bloc":"bloc2","etat":"Et2"},
  {"id":"ajson3","parent":"ajson2","level":"2", "name":"job21","adr":"part21","bloc":"bloc21","etat":"Et21"},
  {"id":"ajson4","parent":"ajson2","level":"2", "name":"job22","adr":"part22","bloc":"bloc22","etat":"Et22"}
];
//    jsonData = $.parseJSON(jsonData);
// -------------
// array des id des lignes qui ont des enfants    
var has_children = [];
$.each(jsonData, function (i, item) {
  if(item.parent!='#' && !has_children.includes(item.parent)){ 
    has_children.push(item.parent); 
  }
});
// -------------
// on construit la ligne <tr>
$.each(jsonData, function (i, item) {
  // tr
  var tr = $('<tr>');
  tr.data('id', item.id);
  tr.data('parent', item.parent);
  tr.data('level', item.level);
  // on masque si enfant
  if(item.parent!='#'){ 
    tr.css({'display':'none'});
  }
 
  // les td
  var td = $('<td>');
  td.data('column',"name");
  // ajoute le chevron si "a des enfants"
  if( has_children.includes(item.id) ){ 
    td.addClass('treegrid-expander');
    var span = $('<span>');
    span.addClass('fa fa-chevron-right');
    td.append(span);
  }
  td.html( td.html() + item.name);
  tr.append(td);
 
  var td = $('<td>');
  td.text(item.adr);
  tr.append(td);
 
  var td = $('<td>');
  td.text(item.bloc);
  tr.append(td);
 
  var td = $('<td>');
  td.text(item.etat);
  tr.append(td);
 
  $('#user_data tbody').append(tr);
});
// -------------
// Afficher/masquer les enfants
$('#user_data tbody').on('click', 'td.treegrid-expander', function () {
  $(this).find('span').toggleClass('fa-chevron-right fa-chevron-down');
  let id = $(this).closest('tr').data('id');
  $('#user_data tbody tr').each( function(){
    if( $(this).data('parent')== id){
      $(this).toggle();
    }
  });
});
// -------------
var table = $('#user_data').DataTable();
// -------------

remarques :

1- "level" n'a plus aucun intérêt.
2- Non traité : il faudrait trier les lignes pour que les "enfants" suivent directement leurs parents (indépendamment de l'ordre dans le data_json).

**lnquaidorsay** · 12/01/2020, 15h17

Salut @Jireaux,

Merci beaucoup pour la solution.

Par contre j'aimerai savoir comment faire si les fils n'a pas de données où ses données sont valorisés à null et qu'i faudrait que j'affiche un cellpading Aucune donnée pour le fils.

Invité · 12/01/2020, 15h34

Bonjour,

Je n'ai pas tout compris...

Pour le cell padding, le "level" peut servir.

Code :

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

1
2
3
4
5
6
7
...
  td.html( td.html() + item.name);
  if( item.level>1 ){ 
    td.css({'padding-left':(item.level*.75)+'rem'}); // ajoute un padding
  }
  tr.append(td);
...

**lnquaidorsay** · 12/01/2020, 16h12

Salut Jreaux62,

Je voulais dire si j'ai cette structure de JSON :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var jsonData = [
  {"id":"ajson1","parent":"#","level":"1", "name":"job1","adr":"part1","bloc":"bloc1","etat":"Et1"},
  {"id":"ajson2","parent":"#","level":"1", "name":"job2","adr":"part2","bloc":"bloc2","etat":"Et2"},
  {"id":"ajson3","parent":"ajson2","level":"2", "name":"job21","adr":"part21","bloc":"bloc21","etat":"Et21"},
  {"id":"ajson4","parent":"ajson2","level":"2", "name":"job22","adr":"part22","bloc":"bloc22","etat":"Et22"},
  {"id":"ajson5","parent":"ajson3","level":"3", "name":"job35","adr":"part35","bloc":"bloc35","etat":"Et35"},
  {"id":"ajson6","parent":"#","level":"1", "name":"job6","adr":"adr6","bloc":"bloc6","etat":"Et6"},
  {"id":"ajson7","parent":"ajson6","level":"2", "message":"Aucune donnee"},
];

Je veux que pour le fils qui a id ajson7 je puisse avoir une ligne style colspan avec un message "Aucune donnée pour le fils". Donc les différents colonnes du tableau ne s'afficheront pas pour le fils qui a id ajson 7
et tout les cellules seront fusionnées et que je puisses écrire le message Aucune donnée pour le fils.

Peux tu l'adapter par rapport à la solution de ton codePen en lien que tu m'as envoyé ?

Invité · 12/01/2020, 17h04

Avec :

Code :

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

{...... "message":"empty"}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
  // ------
  // les td
  // cas particulier : PAS de données
  if( item.message && item.message == 'empty' )
  {
    var td = $('<td>');
    td.attr('colspan',4); // fusionne 4 colonnes
    td.html('Aucune donnée pour le fils');
    tr.append(td);
 
  } else {
...
  }

Remarque : au cas où tu ne l'aurais pas noté, on utilise ici la syntaxe jQuery (la syntaxe en JS pur est différente).

**lnquaidorsay** · 12/01/2020, 17h20

@jreaux62,

le code précédent était :

Code :

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
 
// les td
  var td = $('<td>');
  td.data('column',"name");
  // ajoute le chevron si "a des enfants"
  if( has_children.includes(item.id) ){ 
    td.addClass('treegrid-expander');
    var span = $('<span>');
    span.addClass('fa fa-chevron-right');
    td.append(span);
  }
  td.html( td.html() + item.name);
  if( item.level>1 ){ 
    td.css({'padding-left':(item.level*.75)+'rem'}); // ajoute un padding
  }
  tr.append(td);
 
  var td = $('<td>');
  td.text(item.adr);
  tr.append(td);
 
  var td = $('<td>');
  td.text(item.bloc);
  tr.append(td);
 
  var td = $('<td>');
  td.text(item.etat);
  tr.append(td);

celui ci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 // les td
  // cas particulier : PAS de données
  if( item.message && item.message == 'empty' )
  {
    var td = $('<td>');
    td.attr('colspan',4); // fusionne 4 colonnes
    td.html('Aucune donnée pour le fils');
    tr.append(td);
 
  } else {

Je l'insère où ? s'il te plaît

Invité · 12/01/2020, 17h59

Voir : https://codepen.io/jreaux62/pen/XWJqWMp

**NoSmoking** · 13/01/2020, 13h13

Code :

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

1
2
3
4
var jsonData = [
  {...},
  {"id":"ajson6","parent":"#","level":"1", "name":"job6","adr":"adr6","bloc":"bloc6","etat":"Et6"},
  {"id":"ajson7","parent":"ajson6","level":"2", "message":"Aucune donnee"},

tes données deviennent n'importe quoi !!!

Il ne devrait pas y avoir d'élément ayant un parent sans être dument identifié !
La structure de « base » des éléments de ton tableau devrait être la même, avec des champs renseignés ou non, là tu es en train de mettre des empâtres de partout ce qui n'est jamais bon.

Dans tous les cas il est bon de savoir ce que l'on veut manipuler, on ne sait pas combien il y peut y avoir de niveaux, c'est ce qui conditionne l'écriture du code
• définir correctement son besoin ;
• séparation du traitement et du rendu ;
• prétraitement des données avant utilisation, suivant besoin d'affichage ;
• utilisation de fonction récursive nécessaire ou non ;
• ...

sans un minimum de rigueur cela peut durer longtemps

**lnquaidorsay** · 14/01/2020, 11h31

Salut @jreaux,salut @NoSmoking
les données que je recois du backend se presente comme ceci :

Code :

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
 
var dataGetFromBackend = [{
	"pere": {
		"id": "ajson1",
		"name":"job1",
		"adr":"part1",
		"bloc":"bloc1",
		"etat":"Et1",
		"level_data": "1"
	},
	"fils": []
}
{
	"pere": {
		"id": "ajson2",
		"name":"job2",
		"adr":"part2",
		"bloc":"bloc2",
		"etat":"Et2",
		"level_data": "1"
	},
	"fils": [{
		"id": "ajson3",
		"name":"job21",
		"adr":"part21",
		"bloc":"bloc21",
		"etat":"Et21",
		"level_data": "2"
	}, {
		"id": "ajson4",
		"name":"job22",
		"adr":"part22",
		"bloc":"bloc22",
		"etat":"Et22",
		"level_data": "2"
	}, {
		"fils": [{
		"id": "ajson5",
		"name":"job35",
		"adr":"part35",
		"bloc":"bloc35",
		"etat":"Et35",
		"level_data": "3"
		}]
	}]
}, {
	"pere": {
		"id": "ajson6",
		"name":"job6",
		"adr":"part6",
		"bloc":"bloc6",
		"etat":"Et6",
		"level_data": "1"
	},
	"fils": [{
		"id": "ajson7",
		"message": "empty",
		"level_data": "2"
	}]
}
]

et moi je vais les avoir sous cette forme

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var jsonData = [
  {"id":"ajson1","parent":"#","level":"1", "name":"job1","adr":"part1","bloc":"bloc1","etat":"Et1"},
  {"id":"ajson2","parent":"#","level":"1", "name":"job2","adr":"part2","bloc":"bloc2","etat":"Et2"},
  {"id":"ajson3","parent":"ajson2","level":"2", "name":"job21","adr":"part21","bloc":"bloc21","etat":"Et21"},
  {"id":"ajson4","parent":"ajson2","level":"2", "name":"job22","adr":"part22","bloc":"bloc22","etat":"Et22"},
  {"id":"ajson5","parent":"ajson3","level":"3", "name":"job35","adr":"part35","bloc":"bloc35","etat":"Et35"},
  {"id":"ajson6","parent":"#","level":"1", "name":"job6","adr":"adr6","bloc":"bloc6","etat":"Et6"},
  {"id":"ajson7","parent":"ajson6","level":"2", "message":"empty"},
];

Pour cela, je fais ceci

Code :

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
 
var jsonData = [];
 
var objPere = {};
 
var objFils = {};
 
var jsonToUse = $.parseJSON(dataGetFromBackend);
 
$.each(jsonToUse, function (i, item) {
        var idPere = item.pere.id;
       objPere.id = item.pere.id;
       objPere.parent = "#";
       objPere.level = item.pere.level_data;
       objPere.name = item.pere.name;
       objPere.adr = item.pere.adr;
       objPere.bloc = item.pere.bloc;
	   objPere.etat = item.pere.etat;
       jsonData.push(objPere);
       $.each(item.fils,function(i,itemF) {
        if(!itemF.hasOwnProperty('message')){
            objFils.id = itemF.id;
            objFils.parent = idPere;
            objFils.level = itemF.level_data;
            objFils.name = itemF.name;
			objFils.adr = itemF.adr;
			objFils.bloc = itemF.bloc;
            objFils.etat = itemF.etat;
            jsonData.push(objFils);
        } else {
            objFils.id = itemF.id;
            objFils.parent = idPere;
			objFils.level = itemF.level_data;
            objFils.id = itemF.id;
            objFils.mymessage = "Aucune donnée pour le fils";
            objFils.message = "empty";
            jsonData.push(objFils);
        }
       });
    });

mais ça n'arrive pas à me construire mon tableau d'objet

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var jsonData = [
  {"id":"ajson1","parent":"#","level":"1", "name":"job1","adr":"part1","bloc":"bloc1","etat":"Et1"},
  {"id":"ajson2","parent":"#","level":"1", "name":"job2","adr":"part2","bloc":"bloc2","etat":"Et2"},
  {"id":"ajson3","parent":"ajson2","level":"2", "name":"job21","adr":"part21","bloc":"bloc21","etat":"Et21"},
  {"id":"ajson4","parent":"ajson2","level":"2", "name":"job22","adr":"part22","bloc":"bloc22","etat":"Et22"},
  {"id":"ajson5","parent":"ajson3","level":"3", "name":"job35","adr":"part35","bloc":"bloc35","etat":"Et35"},
  {"id":"ajson6","parent":"#","level":"1", "name":"job6","adr":"adr6","bloc":"bloc6","etat":"Et6"},
  {"id":"ajson7","parent":"ajson6","level":"2", "message":"empty"},
];

Avez vous une idée ?

Invité · 14/01/2020, 12h08

Bonjour,

1- dataGetFromBackend :

il manque une virgule (entre ligne 12 et 13)
"ajson5" : 3ème fils ? (mauvaise syntaxe) **
tel qu'il est écrit, il n'y a pas besoin de $.parseJSON()
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
var jsonToUse = dataGetFromBackend;
```
var objPere = {}; et var objFils sont mal placés = {}; sont mal placés. Ils doivent être dans les .each()

Code :

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
var dataGetFromBackend = [{
  "pere": {
    "id": "ajson1",
    "name":"job1",
    "adr":"part1",
    "bloc":"bloc1",
    "etat":"Et1",
    "level_data": "1"
  },
  "fils": []
}, {
  "pere": {
    "id": "ajson2",
    "name":"job2",
    "adr":"part2",
    "bloc":"bloc2",
    "etat":"Et2",
    "level_data": "1"
  },
  "fils": [{
    "id": "ajson3",
    "name":"job21",
    "adr":"part21",
    "bloc":"bloc21",
    "etat":"Et21",
    "level_data": "2"
  }, {
    "id": "ajson4",
    "name":"job22",
    "adr":"part22",
    "bloc":"bloc22",
    "etat":"Et22",
    "level_data": "2"
  }, {
//    "fils": {
      "id": "ajson5",
      "name":"job35",
      "adr":"part35",
      "bloc":"bloc35",
      "etat":"Et35",
      "level_data": "3"
//    }
  }]
}, {
  "pere": {
    "id": "ajson6",
    "name":"job6",
    "adr":"part6",
    "bloc":"bloc6",
    "etat":"Et6",
    "level_data": "1"
  },
  "fils": [{
    "id": "ajson7",
    "message": "empty",
    "level_data": "2"
  }]
}
];

Code :

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
function get_datas_sorted( jsonToUse )
{
  var jsonData = [];
 
  $.each(jsonToUse, function (i, item) {
    var objPere = {};
    var objPere;
    var idPere = item.pere.id;
    objPere.id = item.pere.id;
    objPere.parent = "#";
    objPere.level = item.pere.level_data;
    objPere.name = item.pere.name;
    objPere.adr = item.pere.adr;
    objPere.bloc = item.pere.bloc;
    objPere.etat = item.pere.etat;
    jsonData.push(objPere);
    $.each(item.fils,function(i,itemF) {
      console.log( itemF );
      var objFils = {};
      if(!itemF.hasOwnProperty('message')){
        objFils.id = itemF.id;
        objFils.parent = idPere;
        objFils.level = itemF.level_data;
        objFils.name = itemF.name;
        objFils.adr = itemF.adr;
        objFils.bloc = itemF.bloc;
        objFils.etat = itemF.etat;
        jsonData.push(objFils);
      } else {
        objFils.id = itemF.id;
        objFils.parent = idPere;
        objFils.level = itemF.level_data;
        objFils.id = itemF.id;
        objFils.mymessage = "Aucune donnée pour le fils";
        objFils.message = "empty";
        jsonData.push(objFils);
      }
    });
  });
  return jsonData;
}
var jsonData = get_datas_sorted( dataGetFromBackend );

Voir : https://codepen.io/jreaux62/pen/XWJqWMp

** [EDIT] Ah non ! Je n'ai pas vu qu'il s'agit d'un 3ème niveau !
Pas traité, donc, mais la syntaxe/structure de dataGetFromBackend n'est, à mon avis, pas correcte.

Je pense que la structure pourrait être :

Code :

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
...
}, {
  "pere": {
    "id": "ajson2",
    "name":"job2",
    "adr":"part2",
    "bloc":"bloc2",
    "etat":"Et2",
    "level_data": "1"
  },
  "fils": [{
		"id": "ajson3",
		"name":"job21",
		"adr":"part21",
		"bloc":"bloc21",
		"etat":"Et21",
		"level_data": "2"
	  }, {
		  "pere": {
			"id": "ajson4",
			"name":"job22",
			"adr":"part22",
			"bloc":"bloc22",
			"etat":"Et22",
			"level_data": "2"
		  },
		  "fils": [{
			"id": "ajson5",
			"name":"job35",
			"adr":"part35",
			"bloc":"bloc35",
			"etat":"Et35",
			"level_data": "3"
		  }]
	  }]
  }, {
...

Et utiliser une fonction récursive.
Mais si tu veux ajouter un 4ème niveau, ça devient vite n'importe quoi...

**lnquaidorsay** · 14/01/2020, 14h06

@Jreaux62
il ya undefined dans le tableau.Pour le fils job21, cela est du à quoi

Invité · 14/01/2020, 15h25

Bon.
J'y ai mis le temps, mais je pense que ça fonctionne : https://codepen.io/jreaux62/pen/XWJqWMp

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
<div id="container">
  <div id="content">
    <div class="container">  
 
      <div class="row">  
 
        <table id="user_data" class="table table-bordered table-striped" style="width:100%">
          <thead>
            <tr class="header">
              <th style="width:100px">Nom Employe</th>
              <th style="width:100px">Adresse Employe</th>
              <th style="width:100px">Bloc fonctionnel</th>
              <th style="width:100px">Etat</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
 
      </div>
    </div>              
  </div>

Structure dataGetFromBackend :

Code :

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
var dataGetFromBackend = [
  {
    "pere": {
      "id": "ajson1",
      "name":"job1",
      "adr":"part1",
      "bloc":"bloc1",
      "etat":"Et1",
      "level_data": "1"
    },
    "fils": []
  }, {
    "pere": {
      "id": "ajson2",
      "name":"job2",
      "adr":"part2",
      "bloc":"bloc2",
      "etat":"Et2",
      "level_data": "1"
    },
    "fils": [{
      "id": "ajson3",
      "name":"job21",
      "adr":"part21",
      "bloc":"bloc21",
      "etat":"Et21",
      "level_data": "2"
    }, {
      "pere": {
        "id": "ajson4",
        "name":"job22",
        "adr":"part22",
        "bloc":"bloc22",
        "etat":"Et22",
        "level_data": "2"
      },
      "fils": [{
        "id": "ajson5",
        "name":"job35",
        "adr":"part35",
        "bloc":"bloc35",
        "etat":"Et35",
        "level_data": "3"
      }]
    }]
  }, {
    "pere": {
      "id": "ajson6",
      "name":"job6",
      "adr":"part6",
      "bloc":"bloc6",
      "etat":"Et6",
      "level_data": "1"
    },
    "fils": [{
      "id": "ajson7",
      "message": "empty",
      "level_data": "2"
    }]
  }
];

Code complet :

Code :

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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
// ------------------
function jsonData_sort_datas( jsonToUse, parent='#' )
{
  var jsonData = [];
  // ---------
  $.each(jsonToUse, function (i, item) {
    var objPere = {};
    var objPere;
    var idPere = item.pere.id;
    objPere.id = item.pere.id;
    objPere.parent = parent;
    objPere.level = item.pere.level_data;
    objPere.name = item.pere.name;
    objPere.adr = item.pere.adr;
    objPere.bloc = item.pere.bloc;
    objPere.etat = item.pere.etat;
    jsonData.push(objPere);
    // ------
    $.each(item.fils,function(i,itemF) {
      var objFils = {};
      if( !itemF.hasOwnProperty('id') ) // Niveau suivant
      {
        var objNext = jsonData_sort_datas( [itemF], item.pere.id );
        $.each(objNext,function(i,itemN) {
          jsonData.push( itemN );
        });
      } else {
 
        if(!itemF.hasOwnProperty('message')){
          objFils.id = itemF.id;
          objFils.parent = idPere;
          objFils.level = itemF.level_data;
          objFils.name = itemF.name;
          objFils.adr = itemF.adr;
          objFils.bloc = itemF.bloc;
          objFils.etat = itemF.etat;
          jsonData.push(objFils);
        } else {
          objFils.id = itemF.id;
          objFils.parent = idPere;
          objFils.level = itemF.level_data;
          objFils.id = itemF.id;
          objFils.mymessage = "Aucune donnée pour le fils";
          objFils.message = "empty";
          jsonData.push(objFils);
        }
 
      }
    });
    // ------
  });
  return jsonData;
}
 
// ------------------
function jsonData_build_table_body( jsonData, table_id )
{
  // ------------------
  // array des id des lignes qui ont des enfants    
  var has_children = [];
  $.each(jsonData, function (i, item) {
    if(item.parent!='#' && !has_children.includes(item.parent)){ 
      has_children.push(item.parent); 
    }
  });
  // ------------------
  // on construit la ligne <tr>
  $.each(jsonData, function (i, item) {
    // ------
    // tr
    console.log( item );
    var tr = $('<tr>');
    tr.attr('data-id', item.id);
    tr.attr('data-parent', item.parent);
    tr.attr('data-level', item.level);
    // on masque si enfant
    if(item.parent!='#'){ 
      tr.css({'display':'none'});
    }
    // ------
    // les td
    // cas particulier : PAS de données
    if( item.message && item.message == 'empty' )
    {
      var td = $('<td>');
      td.attr('colspan',4); // fusionne 4 colonnes
      td.html('Aucune donnée pour le fils');
      tr.append(td);
 
    } else {
 
      var td = $('<td>');
      td.data('column',"name");
      // ajoute le chevron si "a des enfants"
      if( has_children.includes(item.id) ){ 
        td.addClass('treegrid-expander');
        var span = $('<span>');
        span.addClass('fa fa-chevron-right');
        td.append(span);
      }
      td.html( td.html() + item.name);
      if( item.level>1 ){ 
        td.css({'padding-left':(item.level*.75)+'rem'}); // ajoute un padding
      }
      tr.append(td);
 
      var td = $('<td>');
      td.text(item.adr);
      tr.append(td);
 
      var td = $('<td>');
      td.text(item.bloc);
      tr.append(td);
 
      var td = $('<td>');
      td.text(item.etat);
      tr.append(td);
 
    }
    // ------
    $(table_id+' tbody').append(tr);
  });
 
  // ------------------
  // Afficher/masquer les enfants
  $(table_id+' tbody').on('click', 'td.treegrid-expander', function () {
    $(this).find('span').toggleClass('fa-chevron-right fa-chevron-down');
    let id = $(this).closest('tr').data('id');
    let idFils = [];
    $(table_id+' tbody tr').each( function(){
 
      if( $(this).data('parent')==id){
        idFils.push( $(this).data('id') );
        $(this).toggle(); // on ouvre ou ferme le niveau suivant
      }
      if( idFils.includes( $(this).data('parent') ) ){
        $(this).css({'display':'none'}); // on ferme les niveaux inférieurs
      }
    });
  });
}
 
// ------------------
var jsonData = jsonData_sort_datas( dataGetFromBackend );
//console.log( jsonData );
// ------------------
jsonData_build_table_body( jsonData, '#user_data' )
// ------------------
var table = $('#user_data').DataTable();
// ------------------

**lnquaidorsay** · 16/01/2020, 10h27

salut jreaux62,
et si je change de strategie en supprimant le père dans le json gloabl et affiche que le fils en créant dynamiquement un tableau pour chaque fils

Code :

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
 
var dataGetFromBackend = [
  {
    "fils": []
  }, {
    "fils": [{
      "id": "ajson3",
      "name":"job21",
      "adr":"part21",
      "bloc":"bloc21",
      "etat":"Et21",
      "level_data": "2"
    }, {
      "fils": [{
        "id": "ajson5",
        "name":"job35",
        "adr":"part35",
        "bloc":"bloc35",
        "etat":"Et35",
        "level_data": "3"
      }]
    }]
  }, {
 
    "fils": [{
      "id": "ajson7",
      "message": "empty",
      "level_data": "2"
    }]
  }
];

Pour chaque fils un tableau dynamiquement sans le chevron qui se deplie mais avec le colspan pour le message. Comment pourrais je generer dynamiquement le tableau pour chaque fils