JSFiddle - React, Tailwind, and code Playground

by Ea Bangalore

HTML

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

JavaScript

var treeData = [
  { "id" : "ajson1", "parent" : "#", "text" : "Simple root node"},
  { "id" : "ajson2", "parent" : "#", "text" : "Root node 2"}
];

var childrenGroup = [
  { "id" : "ajson3", "parent" : "ajson2", "text" : "Group Child 1",children:false,"icon":"fa fa-file-o"},
  { "id" : "ajson4", "parent" : "ajson2", "text" : "Group Child 2",children:false,"icon":"fa fa-file-o"}
];

var myTree = $('#using_json_2').jstree({ 'core' : {
   "check_callback": true,
   'data' : treeData // Use it here
}});

myTree.on('changed.jstree', function(e, data) {
   console.log('clicke.....');
   childrenGroup.forEach(function(obj){
      console.log(obj);
      $('#using_json_2').jstree().create_node('ajson2',  obj, "last");
   });
    $('#using_json_2').jstree().open_node('ajson2');
});