lavkach3

1
$(function () {
2
  var defaultData = [
3
    {
4
      text: "Parent 1",
5
      href: "#parent1",
6
      tags: ["4"],
7
      nodes: [
8
        {
9
          text: "Child 1",
10
          href: "#child1",
11
          tags: ["2"],
12
          nodes: [
13
            {
14
              text: "Grandchild 1",
15
              href: "#grandchild1",
16
              tags: ["0"],
17
            },
18
            {
19
              text: "Grandchild 2",
20
              href: "#grandchild2",
21
              tags: ["0"],
22
            },
23
          ],
24
        },
25
        {
26
          text: "Child 2",
27
          href: "#child2",
28
          tags: ["0"],
29
        },
30
      ],
31
    },
32
    {
33
      text: "Parent 2",
34
      href: "#parent2",
35
      tags: ["0"],
36
    },
37
    {
38
      text: "Parent 3",
39
      href: "#parent3",
40
      tags: ["0"],
41
    },
42
    {
43
      text: "Parent 4",
44
      href: "#parent4",
45
      tags: ["0"],
46
    },
47
    {
48
      text: "Parent 5",
49
      href: "#parent5",
50
      tags: ["0"],
51
    },
52
  ];
53

54
  var alternateData = [
55
    {
56
      text: "Parent 1",
57
      tags: ["2"],
58
      nodes: [
59
        {
60
          text: "Child 1",
61
          tags: ["3"],
62
          nodes: [
63
            {
64
              text: "Grandchild 1",
65
              tags: ["6"],
66
            },
67
            {
68
              text: "Grandchild 2",
69
              tags: ["3"],
70
            },
71
          ],
72
        },
73
        {
74
          text: "Child 2",
75
          tags: ["3"],
76
        },
77
      ],
78
    },
79
    {
80
      text: "Parent 2",
81
      tags: ["7"],
82
    },
83
    {
84
      text: "Parent 3",
85
      icon: "glyphicon glyphicon-earphone",
86
      href: "#demo",
87
      tags: ["11"],
88
    },
89
    {
90
      text: "Parent 4",
91
      icon: "glyphicon glyphicon-cloud-download",
92
      href: "/demo.html",
93
      tags: ["19"],
94
      selected: true,
95
    },
96
    {
97
      text: "Parent 5",
98
      icon: "glyphicon glyphicon-certificate",
99
      color: "pink",
100
      backColor: "red",
101
      href: "http://www.tesco.com",
102
      tags: ["available", "0"],
103
    },
104
  ];
105

106
  var json =
107
    "[" +
108
    "{" +
109
    '"text": "Parent 1",' +
110
    '"nodes": [' +
111
    "{" +
112
    '"text": "Child 1",' +
113
    '"nodes": [' +
114
    "{" +
115
    '"text": "Grandchild 1"' +
116
    "}," +
117
    "{" +
118
    '"text": "Grandchild 2"' +
119
    "}" +
120
    "]" +
121
    "}," +
122
    "{" +
123
    '"text": "Child 2"' +
124
    "}" +
125
    "]" +
126
    "}," +
127
    "{" +
128
    '"text": "Parent 2"' +
129
    "}," +
130
    "{" +
131
    '"text": "Parent 3"' +
132
    "}," +
133
    "{" +
134
    '"text": "Parent 4"' +
135
    "}," +
136
    "{" +
137
    '"text": "Parent 5"' +
138
    "}" +
139
    "]";
140

141
  $("#treeview1").treeview({
142
    selectedBackColor: "var(--bs-primary)",
143
    onhoverColor: "var(--bs-primary-bg-subtle)",
144
    expandIcon: "ti ti-plus",
145
    collapseIcon: "ti ti-minus",
146
    nodeIcon: "ti ti-folder-filled fs-6",
147
    data: defaultData,
148
  });
149

150
  $("#treeview2").treeview({
151
    levels: 1,
152
    selectedBackColor: "var(--bs-primary)",
153
    onhoverColor: "var(--bs-primary-bg-subtle)",
154
    expandIcon: "ti ti-plus",
155
    collapseIcon: "ti ti-minus",
156
    nodeIcon: "ti ti-folder-filled fs-6",
157
    data: defaultData,
158
  });
159

160
  $("#treeview3").treeview({
161
    levels: 99,
162
    selectedBackColor: "var(--bs-primary)",
163
    onhoverColor: "var(--bs-primary-bg-subtle)",
164
    expandIcon: "ti ti-plus",
165
    collapseIcon: "ti ti-minus",
166
    nodeIcon: "ti ti-folder-filled fs-6",
167
    data: defaultData,
168
  });
169

170
  $("#treeview4").treeview({
171
    color: "#428bca",
172
    selectedBackColor: "var(--bs-primary)",
173
    onhoverColor: "var(--bs-primary-bg-subtle)",
174
    expandIcon: "ti ti-plus",
175
    collapseIcon: "ti ti-minus",
176
    nodeIcon: "ti ti-folder-filled fs-6",
177
    data: defaultData,
178
  });
179

180
  $("#treeview5").treeview({
181
    expandIcon: "ti-angle-right",
182
    onhoverColor: "var(--bs-primary-bg-subtle)",
183
    selectedBackColor: "var(--bs-primary)",
184
    collapseIcon: "ti-angle-down",
185
    nodeIcon: "fa fa-bookmark",
186
    data: defaultData,
187
  });
188

189
  $("#treeview6").treeview({
190
    selectedBackColor: "var(--bs-primary)",
191
    onhoverColor: "var(--bs-primary-bg-subtle)",
192
    expandIcon: "fa fa-circle",
193
    collapseIcon: "fa fa-check-circle-o",
194
    nodeIcon: "ti ti-user",
195
    showTags: true,
196
    data: defaultData,
197
  });
198

199
  $("#treeview7").treeview({
200
    color: "#428bca",
201
    showBorder: false,
202
    data: defaultData,
203
  });
204

205
  $("#treeview8").treeview({
206
    expandIcon: "fa fa-circle",
207
    collapseIcon: "fa fa-check-circle-o",
208
    nodeIcon: "ti ti-user",
209
    color: "yellow",
210
    backColor: "purple",
211
    onhoverColor: "orange",
212
    borderColor: "red",
213
    showBorder: false,
214
    showTags: true,
215
    highlightSelected: true,
216
    selectedColor: "yellow",
217
    selectedBackColor: "darkorange",
218
    data: defaultData,
219
  });
220

221
  $("#treeview9").treeview({
222
    expandIcon: "fa fa-circle",
223
    collapseIcon: "fa fa-check-circle-o",
224
    nodeIcon: "glyphicon glyphicon-user",
225
    color: "yellow",
226
    backColor: "purple",
227
    onhoverColor: "orange",
228
    borderColor: "red",
229
    showBorder: false,
230
    showTags: true,
231
    highlightSelected: true,
232
    selectedColor: "yellow",
233
    selectedBackColor: "darkorange",
234
    data: alternateData,
235
  });
236

237
  $("#treeview10").treeview({
238
    color: "#428bca",
239
    enableLinks: true,
240
    data: defaultData,
241
  });
242

243
  var $searchableTree = $("#treeview-searchable").treeview({
244
    selectedBackColor: "var(--bs-primary)",
245
    onhoverColor: "var(--bs-primary-bg-subtle)",
246
    expandIcon: "ti ti-plus",
247
    collapseIcon: "ti ti-minus",
248
    nodeIcon: "ti ti-folder-filled fs-6",
249
    data: defaultData,
250
  });
251

252
  var search = function (e) {
253
    var pattern = $("#input-search").val();
254
    var options = {
255
      ignoreCase: $("#chk-ignore-case").is(":checked"),
256
      exactMatch: $("#chk-exact-match").is(":checked"),
257
      revealResults: $("#chk-reveal-results").is(":checked"),
258
    };
259
    var results = $searchableTree.treeview("search", [pattern, options]);
260

261
    var output = "<p>" + results.length + " matches found</p>";
262
    $.each(results, function (index, result) {
263
      output += "<p>- " + result.text + "</p>";
264
    });
265
    $("#search-output").html(output);
266
  };
267

268
  $("#btn-search").on("click", search);
269
  $("#input-search").on("keyup", search);
270

271
  $("#btn-clear-search").on("click", function (e) {
272
    $searchableTree.treeview("clearSearch");
273
    $("#input-search").val("");
274
    $("#search-output").html("");
275
  });
276

277
  var initSelectableTree = function () {
278
    return $("#treeview-selectable").treeview({
279
      data: defaultData,
280
      multiSelect: $("#chk-select-multi").is(":checked"),
281
      onNodeSelected: function (event, node) {
282
        $("#selectable-output").prepend(
283
          "<p>" + node.text + " was selected</p>"
284
        );
285
      },
286
      onNodeUnselected: function (event, node) {
287
        $("#selectable-output").prepend(
288
          "<p>" + node.text + " was unselected</p>"
289
        );
290
      },
291
    });
292
  };
293
  var $selectableTree = initSelectableTree();
294

295
  var findSelectableNodes = function () {
296
    return $selectableTree.treeview("search", [
297
      $("#input-select-node").val(),
298
      { ignoreCase: false, exactMatch: false },
299
    ]);
300
  };
301
  var selectableNodes = findSelectableNodes();
302

303
  $("#chk-select-multi:checkbox").on("change", function () {
304
    console.log("multi-select change");
305
    $selectableTree = initSelectableTree();
306
    selectableNodes = findSelectableNodes();
307
  });
308

309
  // Select/unselect/toggle nodes
310
  $("#input-select-node").on("keyup", function (e) {
311
    selectableNodes = findSelectableNodes();
312
    $(".select-node").prop("disabled", !(selectableNodes.length >= 1));
313
  });
314

315
  $("#btn-select-node.select-node").on("click", function (e) {
316
    $selectableTree.treeview("selectNode", [
317
      selectableNodes,
318
      { silent: $("#chk-select-silent").is(":checked") },
319
    ]);
320
  });
321

322
  $("#btn-unselect-node.select-node").on("click", function (e) {
323
    $selectableTree.treeview("unselectNode", [
324
      selectableNodes,
325
      { silent: $("#chk-select-silent").is(":checked") },
326
    ]);
327
  });
328

329
  $("#btn-toggle-selected.select-node").on("click", function (e) {
330
    $selectableTree.treeview("toggleNodeSelected", [
331
      selectableNodes,
332
      { silent: $("#chk-select-silent").is(":checked") },
333
    ]);
334
  });
335

336
  var $expandibleTree = $("#treeview-expandible").treeview({
337
    data: defaultData,
338
    onNodeCollapsed: function (event, node) {
339
      $("#expandible-output").prepend("<p>" + node.text + " was collapsed</p>");
340
    },
341
    onNodeExpanded: function (event, node) {
342
      $("#expandible-output").prepend("<p>" + node.text + " was expanded</p>");
343
    },
344
  });
345

346
  var findExpandibleNodess = function () {
347
    return $expandibleTree.treeview("search", [
348
      $("#input-expand-node").val(),
349
      { ignoreCase: false, exactMatch: false },
350
    ]);
351
  };
352
  var expandibleNodes = findExpandibleNodess();
353

354
  // Expand/collapse/toggle nodes
355
  $("#input-expand-node").on("keyup", function (e) {
356
    expandibleNodes = findExpandibleNodess();
357
    $(".expand-node").prop("disabled", !(expandibleNodes.length >= 1));
358
  });
359

360
  $("#btn-expand-node.expand-node").on("click", function (e) {
361
    var levels = $("#select-expand-node-levels").val();
362
    $expandibleTree.treeview("expandNode", [
363
      expandibleNodes,
364
      { levels: levels, silent: $("#chk-expand-silent").is(":checked") },
365
    ]);
366
  });
367

368
  $("#btn-collapse-node.expand-node").on("click", function (e) {
369
    $expandibleTree.treeview("collapseNode", [
370
      expandibleNodes,
371
      { silent: $("#chk-expand-silent").is(":checked") },
372
    ]);
373
  });
374

375
  $("#btn-toggle-expanded.expand-node").on("click", function (e) {
376
    $expandibleTree.treeview("toggleNodeExpanded", [
377
      expandibleNodes,
378
      { silent: $("#chk-expand-silent").is(":checked") },
379
    ]);
380
  });
381

382
  // Expand/collapse all
383
  $("#btn-expand-all").on("click", function (e) {
384
    var levels = $("#select-expand-all-levels").val();
385
    $expandibleTree.treeview("expandAll", {
386
      levels: levels,
387
      silent: $("#chk-expand-silent").is(":checked"),
388
    });
389
  });
390

391
  $("#btn-collapse-all").on("click", function (e) {
392
    $expandibleTree.treeview("collapseAll", {
393
      silent: $("#chk-expand-silent").is(":checked"),
394
    });
395
  });
396

397
  var $checkableTree = $("#treeview-checkable").treeview({
398
    data: defaultData,
399
    showIcon: false,
400
    showCheckbox: true,
401
    onNodeChecked: function (event, node) {
402
      $("#checkable-output").prepend("<p>" + node.text + " was checked</p>");
403
    },
404
    onNodeUnchecked: function (event, node) {
405
      $("#checkable-output").prepend("<p>" + node.text + " was unchecked</p>");
406
    },
407
  });
408

409
  var findCheckableNodess = function () {
410
    return $checkableTree.treeview("search", [
411
      $("#input-check-node").val(),
412
      { ignoreCase: false, exactMatch: false },
413
    ]);
414
  };
415
  var checkableNodes = findCheckableNodess();
416

417
  // Check/uncheck/toggle nodes
418
  $("#input-check-node").on("keyup", function (e) {
419
    checkableNodes = findCheckableNodess();
420
    $(".check-node").prop("disabled", !(checkableNodes.length >= 1));
421
  });
422

423
  $("#btn-check-node.check-node").on("click", function (e) {
424
    $checkableTree.treeview("checkNode", [
425
      checkableNodes,
426
      { silent: $("#chk-check-silent").is(":checked") },
427
    ]);
428
  });
429

430
  $("#btn-uncheck-node.check-node").on("click", function (e) {
431
    $checkableTree.treeview("uncheckNode", [
432
      checkableNodes,
433
      { silent: $("#chk-check-silent").is(":checked") },
434
    ]);
435
  });
436

437
  $("#btn-toggle-checked.check-node").on("click", function (e) {
438
    $checkableTree.treeview("toggleNodeChecked", [
439
      checkableNodes,
440
      { silent: $("#chk-check-silent").is(":checked") },
441
    ]);
442
  });
443

444
  // Check/uncheck all
445
  $("#btn-check-all").on("click", function (e) {
446
    $checkableTree.treeview("checkAll", {
447
      silent: $("#chk-check-silent").is(":checked"),
448
    });
449
  });
450

451
  $("#btn-uncheck-all").on("click", function (e) {
452
    $checkableTree.treeview("uncheckAll", {
453
      silent: $("#chk-check-silent").is(":checked"),
454
    });
455
  });
456

457
  var $disabledTree = $("#treeview-disabled").treeview({
458
    data: defaultData,
459
    onNodeDisabled: function (event, node) {
460
      $("#disabled-output").prepend("<p>" + node.text + " was disabled</p>");
461
    },
462
    onNodeEnabled: function (event, node) {
463
      $("#disabled-output").prepend("<p>" + node.text + " was enabled</p>");
464
    },
465
    onNodeCollapsed: function (event, node) {
466
      $("#disabled-output").prepend("<p>" + node.text + " was collapsed</p>");
467
    },
468
    onNodeUnchecked: function (event, node) {
469
      $("#disabled-output").prepend("<p>" + node.text + " was unchecked</p>");
470
    },
471
    onNodeUnselected: function (event, node) {
472
      $("#disabled-output").prepend("<p>" + node.text + " was unselected</p>");
473
    },
474
  });
475

476
  var findDisabledNodes = function () {
477
    return $disabledTree.treeview("search", [
478
      $("#input-disable-node").val(),
479
      { ignoreCase: false, exactMatch: false },
480
    ]);
481
  };
482
  var disabledNodes = findDisabledNodes();
483

484
  // Expand/collapse/toggle nodes
485
  $("#input-disable-node").on("keyup", function (e) {
486
    disabledNodes = findDisabledNodes();
487
    $(".disable-node").prop("disabled", !(disabledNodes.length >= 1));
488
  });
489

490
  $("#btn-disable-node.disable-node").on("click", function (e) {
491
    $disabledTree.treeview("disableNode", [
492
      disabledNodes,
493
      { silent: $("#chk-disable-silent").is(":checked") },
494
    ]);
495
  });
496

497
  $("#btn-enable-node.disable-node").on("click", function (e) {
498
    $disabledTree.treeview("enableNode", [
499
      disabledNodes,
500
      { silent: $("#chk-disable-silent").is(":checked") },
501
    ]);
502
  });
503

504
  $("#btn-toggle-disabled.disable-node").on("click", function (e) {
505
    $disabledTree.treeview("toggleNodeDisabled", [
506
      disabledNodes,
507
      { silent: $("#chk-disable-silent").is(":checked") },
508
    ]);
509
  });
510

511
  // Expand/collapse all
512
  $("#btn-disable-all").on("click", function (e) {
513
    $disabledTree.treeview("disableAll", {
514
      silent: $("#chk-disable-silent").is(":checked"),
515
    });
516
  });
517

518
  $("#btn-enable-all").on("click", function (e) {
519
    $disabledTree.treeview("enableAll", {
520
      silent: $("#chk-disable-silent").is(":checked"),
521
    });
522
  });
523

524
  var $tree = $("#treeview12").treeview({
525
    data: json,
526
  });
527
});
528