JSFiddle - React, Tailwind, and code Playground

by Frank Long

HTML

<script src="//static.jstree.com/3.2.1/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="//static.jstree.com/3.2.1/assets/dist/themes/default/style.min.css">
<div id="tree">
  <ul>
    <li data-jstree='{"opened":true}'>Root node
      <ul>
        <li ID="1">Child node 1</li>
        <li ID="2">Child node 2</li>
        <li ID="3">Child node 3</li>
        <li ID="4">Child node 4</li>
        <li ID="5">Child node 5</li>
        <li ID="6">Child node 6</li>
      </ul>
    </li>
  </ul>
</div>
<button id="testbutton">test</button>
<div id="bar"></div>

JavaScript

$('#tree').jstree({
  "core": {
    "check_callback": true
  },
  "contextmenu": {
    items: {
      "New": {
        "label": "New Category",
        "action": function(data) {
          var inst = $.jstree.reference(data.reference),
            root = inst.get_node("#");
          inst.create_node(
            root, {
              id: "-1", //create node with placeholder ID, will be assigned at datasource 
              text: "New Category",
              data: {
                ObjectId: "-1"
              } //will be assigned at datasource
            },
            "last",
            function(new_node) {
              setTimeout(function() {
                inst.edit(new_node);
              }, 0);
            }
          );
          //simulate going to datasource, creating row and returning an id and ObjectId
          var newid = Math.random().toString();
          var newObjectId = Math.random().toString();
          //update the newly created node's id
          inst.set_id("-1", newid);
          //update the newly created node's ObjectId
          console.log(inst.get_node("newid"));
        }
      }
    }
  },
  "plugins": ["contextmenu"]
});

$('#tree').on('select_node.jstree', function(e, data) {
  var inst = $('#tree').jstree(true),
    obj = inst.get_node(data.node.id);
  $('#bar').html(obj.id + ":" + obj.text)
});

$('#testbutton').click(function() {
  $("#tree").jstree(true).set_id("1", "7");
  $("#tree").jstree(true).set_id("2", "8");
})