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);
...

Réaliser un tree table multi niveau

jQuery

Vue hybride

Discussions similaires

Partager

Partager