JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/jstree.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/themes/default/style.min.css">
<div id="tree"></div>

JavaScript

var files = [{
    webkitRelativePath: "Simple Root Node"
  },
  {
    webkitRelativePath: "Root Node 2"
  },
  {
    webkitRelativePath: "Root Node 2/Child 1"
  },
  {
    webkitRelativePath: "Root Node 2/Child 2"
  }
];
var idcount = 0;
var treeJSON = [];
var idmap = {};

function add(dirs) {
  if (!dirs.length) return "#";
  var name = dirs.join("/");
  if (name in idmap) return idmap[name];
  var dir = dirs.pop();
  var parent = add(dirs);
  var id = "ajson" + ++idcount;
  treeJSON.push({
    id: id,
    parent: parent,
    text: dir
  });
  return idmap[name] = id;
}
for (var i = 0; i < files.length; ++i) {
  var name = files[i].webkitRelativePath;
  add(name.split("/"));
}

console.log(treeJSON);
$('#tree')
  .jstree({
    'core': {
      'check_callback': true,
      'data': function(node, cb) {
        cb.call(this, treeJSON);
      }
    }
  });
var tree = $('#tree').jstree(true)
$('#tree').on('changed.jstree', function(event, action) {
  if (action.action !== 'select_node') {
    return
  }

  console.log(action.node)
  console.log(action.node.children.length ? 'Directory' : 'Leaf')
});
tree.refresh();