https://oneoptimumlifestyles.com/myaccountv2/assets/js/table-treeview.js

1
2 $(function () {
3    var
4        $table = $('#tree-table-1'),
5        rows = $table.find('tr');
6
7    rows.each(function (index, row) {
8        var
9            $row = $(row),
10            level = $row.data('level'),
11            id = $row.data('id'),
12            $columnName = $row.find('td[data-column="name"]'),
13            children = $table.find('tr[data-parent="' + id + '"]');
14
15        if (children.length) {
16            var expander = $columnName.prepend('' +
17                '<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
18                '');
19
20            children.hide();
21
22            expander.on('click', function (e) {
23                var $target = $(e.target);
24                if ($target.hasClass('glyphicon-chevron-right')) {
25                    $target
26                        .removeClass('glyphicon-chevron-right')
27                        .addClass('glyphicon-chevron-down');
28
29                    children.show();
30                } else {
31                    $target
32                        .removeClass('glyphicon-chevron-down')
33                        .addClass('glyphicon-chevron-right');
34
35                    reverseHide($table, $row);
36                }
37            });
38        }
39

40        $columnName.prepend('' +
41            '<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
42            '');
43    });
44
45    // Reverse hide all elements
46    reverseHide = function (table, element) {
47        var
48            $element = $(element),
49            id = $element.data('id'),
50            children = table.find('tr[data-parent="' + id + '"]');
51
52        if (children.length) {
53            children.each(function (i, e) {
54                reverseHide(table, e);
55            });
56
57            $element
58                .find('.glyphicon-chevron-down')
59                .removeClass('glyphicon-chevron-down')
60                .addClass('glyphicon-chevron-right');
61
62            children.hide();
63        }
64    };
65});
66
67
68 // table 2
69 $(function () {
70    var
71        $table = $('#tree-table-2'),
72        rows = $table.find('tr');
73
74    rows.each(function (index, row) {
75        var
76            $row = $(row),
77            level = $row.data('level'),
78            id = $row.data('id'),
79            $columnName = $row.find('td[data-column="name"]'),
80            children = $table.find('tr[data-parent="' + id + '"]');
81
82        if (children.length) {

83            var expander = $columnName.prepend('' +
84                '<span class="treegrid-expander glyphicon glyphicon-plus"></span>' +
85                '');
86
87            children.hide();
88
89            expander.on('click', function (e) {
90                var $target = $(e.target);
91                if ($target.hasClass('glyphicon-plus')) {
92                    $target
93                        .removeClass('glyphicon-plus')
94                        .addClass('glyphicon-minus');
95
96                    children.show();
97                } else {
98                    $target
99                        .removeClass('glyphicon-minus')
100                        .addClass('glyphicon-plus');
101
102                    reverseHide($table, $row);
103                }
104            });
105        }
106
107        $columnName.prepend('' +
108            '<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
109            '');
110    });
111
112    // Reverse hide all elements
113    reverseHide = function (table, element) {
114        var
115            $element = $(element),
116            id = $element.data('id'),
117            children = table.find('tr[data-parent="' + id + '"]');
118
119        if (children.length) {
120            children.each(function (i, e) {
121                reverseHide(table, e);
122            });
123
124            $element
125                .find('.glyphicon-chevron-down')
126                .removeClass('glyphicon-chevron-down')
127                .addClass('glyphicon-chevron-right');
128
129            children.hide();
130        }
131    };
132});
133
134// table 3
135 $(function () {
136    var
137        $table = $('#tree-table-3'),
138        rows = $table.find('tr');
139
140    rows.each(function (index, row) {
141        var
142            $row = $(row),
143            level = $row.data('level'),
144            id = $row.data('id'),
145            $columnName = $row.find('td[data-column="name"]'),
146            children = $table.find('tr[data-parent="' + id + '"]');
147
148        if (children.length) {

149            var expander = $columnName.prepend('' +
150                '<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
151                '');
152
153            children.hide();
154
155            expander.on('click', function (e) {
156                var $target = $(e.target);
157                if ($target.hasClass('glyphicon-chevron-right')) {
158                    $target
159                        .removeClass('glyphicon-chevron-right')
160                        .addClass('glyphicon-chevron-down');
161
162                    children.show();
163                } else {
164                    $target
165                        .removeClass('glyphicon-chevron-down')
166                        .addClass('glyphicon-chevron-right');
167
168                    reverseHide($table, $row);
169                }
170            });
171        }
172
173        $columnName.prepend('' +
174            '<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
175            '');
176    });
177
178    // Reverse hide all elements
179    reverseHide = function (table, element) {
180        var
181            $element = $(element),
182            id = $element.data('id'),
183            children = table.find('tr[data-parent="' + id + '"]');
184
185        if (children.length) {
186            children.each(function (i, e) {
187                reverseHide(table, e);
188            });
189
190            $element
191                .find('.glyphicon-chevron-down')
192                .removeClass('glyphicon-chevron-down')
193                .addClass('glyphicon-chevron-right');
194
195            children.hide();
196        }
197    };
198});
199
200 // table 4
201 $(function () {
202    var
203        $table = $('#tree-table-4'),
204        rows = $table.find('tr');
205
206    rows.each(function (index, row) {
207        var
208            $row = $(row),
209            level = $row.data('level'),
210            id = $row.data('id'),
211            $columnName = $row.find('td[data-column="name"]'),
212            children = $table.find('tr[data-parent="' + id + '"]');
213
214        if (children.length) {

215            var expander = $columnName.prepend('' +
216                '<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
217                '');
218
219            children.hide();
220
221            expander.on('click', function (e) {
222                var $target = $(e.target);
223                if ($target.hasClass('glyphicon-chevron-right')) {
224                    $target
225                        .removeClass('glyphicon-chevron-right')
226                        .addClass('glyphicon-chevron-down');
227
228                    children.show();
229                } else {
230                    $target
231                        .removeClass('glyphicon-chevron-down')
232                        .addClass('glyphicon-chevron-right');
233
234                    reverseHide($table, $row);
235                }
236            });
237        }
238
239        $columnName.prepend('' +
240            '<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
241            '');
242    });
243
244    // Reverse hide all elements
245    reverseHide = function (table, element) {
246        var
247            $element = $(element),
248            id = $element.data('id'),
249            children = table.find('tr[data-parent="' + id + '"]');
250
251        if (children.length) {
252            children.each(function (i, e) {
253                reverseHide(table, e);
254            });
255
256            $element
257                .find('.glyphicon-chevron-down')
258                .removeClass('glyphicon-chevron-down')
259                .addClass('glyphicon-chevron-right');
260
261            children.hide();
262        }
263    };
264});
265 // table 5
266 $(function () {
267    var
268        $table = $('#tree-table-5'),
269        rows = $table.find('tr');
270
271    rows.each(function (index, row) {
272        var
273            $row = $(row),
274            level = $row.data('level'),
275            id = $row.data('id'),
276            $columnName = $row.find('td[data-column="name"]'),
277            children = $table.find('tr[data-parent="' + id + '"]');
278
279        if (children.length) {

280            var expander = $columnName.prepend('' +
281                '<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
282                '');
283
284            children.hide();
285
286            expander.on('click', function (e) {
287                var $target = $(e.target);
288                if ($target.hasClass('glyphicon-chevron-right')) {
289                    $target
290                        .removeClass('glyphicon-chevron-right')
291                        .addClass('glyphicon-chevron-down');
292
293                    children.show();
294                } else {
295                    $target
296                        .removeClass('glyphicon-chevron-down')
297                        .addClass('glyphicon-chevron-right');
298
299                    reverseHide($table, $row);
300                }
301            });
302        }
303
304        $columnName.prepend('' +
305            '<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
306            '');
307    });
308
309    // Reverse hide all elements
310    reverseHide = function (table, element) {
311        var
312            $element = $(element),
313            id = $element.data('id'),
314            children = table.find('tr[data-parent="' + id + '"]');
315
316        if (children.length) {
317            children.each(function (i, e) {
318                reverseHide(table, e);
319            });
320
321            $element
322                .find('.glyphicon-chevron-down')
323                .removeClass('glyphicon-chevron-down')
324                .addClass('glyphicon-chevron-right');
325
326            children.hide();
327        }
328    };
329});
330
331
332// table 6
333 $(function () {
334    var
335        $table = $('#tree-table-6'),
336        rows = $table.find('tr');
337
338    rows.each(function (index, row) {
339        var
340            $row = $(row),
341            level = $row.data('level'),
342            id = $row.data('id'),
343            $columnName = $row.find('td[data-column="name"]'),
344            children = $table.find('tr[data-parent="' + id + '"]');
345
346        if (children.length) {

347            var expander = $columnName.prepend('' +
348                '<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
349                '');
350
351            children.hide();
352
353            expander.on('click', function (e) {
354                var $target = $(e.target);
355                if ($target.hasClass('glyphicon-chevron-right')) {
356                    $target
357                        .removeClass('glyphicon-chevron-right')
358                        .addClass('glyphicon-chevron-down');
359
360                    children.show();
361                } else {
362                    $target
363                        .removeClass('glyphicon-chevron-down')
364                        .addClass('glyphicon-chevron-right');
365
366                    reverseHide($table, $row);
367                }
368            });
369        }
370
371        $columnName.prepend('' +
372            '<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
373            '');
374    });
375
376    // Reverse hide all elements
377    reverseHide = function (table, element) {
378        var
379            $element = $(element),
380            id = $element.data('id'),
381            children = table.find('tr[data-parent="' + id + '"]');
382
383        if (children.length) {
384            children.each(function (i, e) {
385                reverseHide(table, e);
386            });
387
388            $element
389                .find('.glyphicon-chevron-down')
390                .removeClass('glyphicon-chevron-down')
391                .addClass('glyphicon-chevron-right');
392
393            children.hide();
394        }
395    };
396});
397
398// table 7
399 $(function () {
400    var
401        $table = $('#tree-table-7'),
402        rows = $table.find('tr');
403
404    rows.each(function (index, row) {
405        var
406            $row = $(row),
407            level = $row.data('level'),
408            id = $row.data('id'),
409            $columnName = $row.find('td[data-column="name"]'),
410            children = $table.find('tr[data-parent="' + id + '"]');
411
412        if (children.length) {

413            var expander = $columnName.prepend('' +
414                '<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
415                '');
416
417            children.hide();
418
419            expander.on('click', function (e) {
420                var $target = $(e.target);
421                if ($target.hasClass('glyphicon-chevron-right')) {
422                    $target
423                        .removeClass('glyphicon-chevron-right')
424                        .addClass('glyphicon-chevron-down');
425
426                    children.show();
427                } else {
428                    $target
429                        .removeClass('glyphicon-chevron-down')
430                        .addClass('glyphicon-chevron-right');
431
432                    reverseHide($table, $row);
433                }
434            });
435        }
436
437        $columnName.prepend('' +
438            '<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
439            '');
440    });
441
442    // Reverse hide all elements
443    reverseHide = function (table, element) {
444        var
445            $element = $(element),
446            id = $element.data('id'),
447            children = table.find('tr[data-parent="' + id + '"]');
448
449        if (children.length) {
450            children.each(function (i, e) {
451                reverseHide(table, e);
452            });
453
454            $element
455                .find('.glyphicon-chevron-down')
456                .removeClass('glyphicon-chevron-down')
457                .addClass('glyphicon-chevron-right');
458
459            children.hide();
460        }
461    };
462});
463
464 // table 8
465 $(function () {
466    var
467        $table = $('#tree-table-8'),
468        rows = $table.find('tr');
469
470    rows.each(function (index, row) {
471        var
472            $row = $(row),
473            level = $row.data('level'),
474            id = $row.data('id'),
475            $columnName = $row.find('td[data-column="name"]'),
476            children = $table.find('tr[data-parent="' + id + '"]');
477
478        if (children.length) {

479            var expander = $columnName.prepend('' +
480                '<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
481                '');
482
483            children.hide();
484
485            expander.on('click', function (e) {
486                var $target = $(e.target);
487                if ($target.hasClass('glyphicon-chevron-right')) {
488                    $target
489                        .removeClass('glyphicon-chevron-right')
490                        .addClass('glyphicon-chevron-down');
491
492                    children.show();
493                } else {
494                    $target
495                        .removeClass('glyphicon-chevron-down')
496                        .addClass('glyphicon-chevron-right');
497
498                    reverseHide($table, $row);
499                }
500            });
501        }
502
503        $columnName.prepend('' +
504            '<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
505            '');
506    });
507
508    // Reverse hide all elements
509    reverseHide = function (table, element) {
510        var
511            $element = $(element),
512            id = $element.data('id'),
513            children = table.find('tr[data-parent="' + id + '"]');
514
515        if (children.length) {
516            children.each(function (i, e) {
517                reverseHide(table, e);
518            });
519
520            $element
521                .find('.glyphicon-chevron-down')
522                .removeClass('glyphicon-chevron-down')
523                .addClass('glyphicon-chevron-right');
524
525            children.hide();
526        }
527    };
528});