bitacora/public/assets/extra-libs/treeview/dist/bootstrap-treeview-init.js

$(function () {
  var defaultData = [
    {
      text: "Parent 1",
      href: "#parent1",
      tags: ["4"],
      nodes: [
        {
          text: "Child 1",
          href: "#child1",
          tags: ["2"],
          nodes: [
            {
              text: "Grandchild 1",
              href: "#grandchild1",
              tags: ["0"],
            },
            {
              text: "Grandchild 2",
              href: "#grandchild2",
              tags: ["0"],
            },
          ],
        },
        {
          text: "Child 2",
          href: "#child2",
          tags: ["0"],
        },
      ],
    },
    {
      text: "Parent 2",
      href: "#parent2",
      tags: ["0"],
    },
    {
      text: "Parent 3",
      href: "#parent3",
      tags: ["0"],
    },
    {
      text: "Parent 4",
      href: "#parent4",
      tags: ["0"],
    },
    {
      text: "Parent 5",
      href: "#parent5",
      tags: ["0"],
    },
  ];

  var alternateData = [
    {
      text: "Parent 1",
      tags: ["2"],
      nodes: [
        {
          text: "Child 1",
          tags: ["3"],
          nodes: [
            {
              text: "Grandchild 1",
              tags: ["6"],
            },
            {
              text: "Grandchild 2",
              tags: ["3"],
            },
          ],
        },
        {
          text: "Child 2",
          tags: ["3"],
        },
      ],
    },
    {
      text: "Parent 2",
      tags: ["7"],
    },
    {
      text: "Parent 3",
      icon: "glyphicon glyphicon-earphone",
      href: "#demo",
      tags: ["11"],
    },
    {
      text: "Parent 4",
      icon: "glyphicon glyphicon-cloud-download",
      href: "/demo.html",
      tags: ["19"],
      selected: true,
    },
    {
      text: "Parent 5",
      icon: "glyphicon glyphicon-certificate",
      color: "pink",
      backColor: "red",
      href: "http://www.tesco.com",
      tags: ["available", "0"],
    },
  ];

  var json =
    "[" +
    "{" +
    '"text": "Parent 1",' +
    '"nodes": [' +
    "{" +
    '"text": "Child 1",' +
    '"nodes": [' +
    "{" +
    '"text": "Grandchild 1"' +
    "}," +
    "{" +
    '"text": "Grandchild 2"' +
    "}" +
    "]" +
    "}," +
    "{" +
    '"text": "Child 2"' +
    "}" +
    "]" +
    "}," +
    "{" +
    '"text": "Parent 2"' +
    "}," +
    "{" +
    '"text": "Parent 3"' +
    "}," +
    "{" +
    '"text": "Parent 4"' +
    "}," +
    "{" +
    '"text": "Parent 5"' +
    "}" +
    "]";

  $("#treeview1").treeview({
    selectedBackColor: "#03a9f3",
    onhoverColor: "rgba(0, 0, 0, 0.05)",
    expandIcon: "ti-plus",
    collapseIcon: "ti-minus",
    nodeIcon: "fa fa-folder",
    data: defaultData,
  });

  $("#treeview2").treeview({
    levels: 1,
    selectedBackColor: "#03a9f3",
    onhoverColor: "rgba(0, 0, 0, 0.05)",
    expandIcon: "ti-plus",
    collapseIcon: "ti-minus",
    nodeIcon: "fa fa-folder",
    data: defaultData,
  });

  $("#treeview3").treeview({
    levels: 99,
    selectedBackColor: "#03a9f3",
    onhoverColor: "rgba(0, 0, 0, 0.05)",
    expandIcon: "ti-plus",
    collapseIcon: "ti-minus",
    nodeIcon: "fa fa-folder",
    data: defaultData,
  });

  $("#treeview4").treeview({
    color: "#428bca",
    selectedBackColor: "#03a9f3",
    onhoverColor: "rgba(0, 0, 0, 0.05)",
    expandIcon: "ti-plus",
    collapseIcon: "ti-minus",
    nodeIcon: "fa fa-folder",
    data: defaultData,
  });

  $("#treeview5").treeview({
    expandIcon: "ti-angle-right",
    onhoverColor: "rgba(0, 0, 0, 0.05)",
    selectedBackColor: "#03a9f3",
    collapseIcon: "ti-angle-down",
    nodeIcon: "fa fa-bookmark",
    data: defaultData,
  });

  $("#treeview6").treeview({
    selectedBackColor: "#03a9f3",
    onhoverColor: "rgba(0, 0, 0, 0.05)",
    expandIcon: "fa fa-circle",
    collapseIcon: "fa fa-check-circle-o",
    nodeIcon: "ti-user",
    showTags: true,
    data: defaultData,
  });

  $("#treeview7").treeview({
    color: "#428bca",
    showBorder: false,
    data: defaultData,
  });

  $("#treeview8").treeview({
    expandIcon: "fa fa-circle",
    collapseIcon: "fa fa-check-circle-o",
    nodeIcon: "ti-user",
    color: "yellow",
    backColor: "purple",
    onhoverColor: "orange",
    borderColor: "red",
    showBorder: false,
    showTags: true,
    highlightSelected: true,
    selectedColor: "yellow",
    selectedBackColor: "darkorange",
    data: defaultData,
  });

  $("#treeview9").treeview({
    expandIcon: "fa fa-circle",
    collapseIcon: "fa fa-check-circle-o",
    nodeIcon: "glyphicon glyphicon-user",
    color: "yellow",
    backColor: "purple",
    onhoverColor: "orange",
    borderColor: "red",
    showBorder: false,
    showTags: true,
    highlightSelected: true,
    selectedColor: "yellow",
    selectedBackColor: "darkorange",
    data: alternateData,
  });

  $("#treeview10").treeview({
    color: "#428bca",
    enableLinks: true,
    data: defaultData,
  });

  var $searchableTree = $("#treeview-searchable").treeview({
    selectedBackColor: "#03a9f3",
    onhoverColor: "rgba(0, 0, 0, 0.05)",
    expandIcon: "ti-plus",
    collapseIcon: "ti-minus",
    nodeIcon: "fa fa-folder",
    data: defaultData,
  });

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

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

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

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

  var initSelectableTree = function () {
    return $("#treeview-selectable").treeview({
      data: defaultData,
      multiSelect: $("#chk-select-multi").is(":checked"),
      onNodeSelected: function (event, node) {
        $("#selectable-output").prepend(
          "<p>" + node.text + " was selected</p>"
        );
      },
      onNodeUnselected: function (event, node) {
        $("#selectable-output").prepend(
          "<p>" + node.text + " was unselected</p>"
        );
      },
    });
  };
  var $selectableTree = initSelectableTree();

  var findSelectableNodes = function () {
    return $selectableTree.treeview("search", [
      $("#input-select-node").val(),
      { ignoreCase: false, exactMatch: false },
    ]);
  };
  var selectableNodes = findSelectableNodes();

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

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

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

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

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

  var $expandibleTree = $("#treeview-expandible").treeview({
    data: defaultData,
    onNodeCollapsed: function (event, node) {
      $("#expandible-output").prepend("<p>" + node.text + " was collapsed</p>");
    },
    onNodeExpanded: function (event, node) {
      $("#expandible-output").prepend("<p>" + node.text + " was expanded</p>");
    },
  });

  var findExpandibleNodess = function () {
    return $expandibleTree.treeview("search", [
      $("#input-expand-node").val(),
      { ignoreCase: false, exactMatch: false },
    ]);
  };
  var expandibleNodes = findExpandibleNodess();

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

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

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

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

  // Expand/collapse all
  $("#btn-expand-all").on("click", function (e) {
    var levels = $("#select-expand-all-levels").val();
    $expandibleTree.treeview("expandAll", {
      levels: levels,
      silent: $("#chk-expand-silent").is(":checked"),
    });
  });

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

  var $checkableTree = $("#treeview-checkable").treeview({
    data: defaultData,
    showIcon: false,
    showCheckbox: true,
    onNodeChecked: function (event, node) {
      $("#checkable-output").prepend("<p>" + node.text + " was checked</p>");
    },
    onNodeUnchecked: function (event, node) {
      $("#checkable-output").prepend("<p>" + node.text + " was unchecked</p>");
    },
  });

  var findCheckableNodess = function () {
    return $checkableTree.treeview("search", [
      $("#input-check-node").val(),
      { ignoreCase: false, exactMatch: false },
    ]);
  };
  var checkableNodes = findCheckableNodess();

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

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

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

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

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

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

  var $disabledTree = $("#treeview-disabled").treeview({
    data: defaultData,
    onNodeDisabled: function (event, node) {
      $("#disabled-output").prepend("<p>" + node.text + " was disabled</p>");
    },
    onNodeEnabled: function (event, node) {
      $("#disabled-output").prepend("<p>" + node.text + " was enabled</p>");
    },
    onNodeCollapsed: function (event, node) {
      $("#disabled-output").prepend("<p>" + node.text + " was collapsed</p>");
    },
    onNodeUnchecked: function (event, node) {
      $("#disabled-output").prepend("<p>" + node.text + " was unchecked</p>");
    },
    onNodeUnselected: function (event, node) {
      $("#disabled-output").prepend("<p>" + node.text + " was unselected</p>");
    },
  });

  var findDisabledNodes = function () {
    return $disabledTree.treeview("search", [
      $("#input-disable-node").val(),
      { ignoreCase: false, exactMatch: false },
    ]);
  };
  var disabledNodes = findDisabledNodes();

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

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

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

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

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

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

  var $tree = $("#treeview12").treeview({
    data: json,
  });
});