[jsTree] create node dynamic

Browse more Jquery Examples
<!DOCTYPE html>
<!--
[homepage]
  https://www.jstree.com/
[reference] 
  https://mkil.tistory.com/436?category=541779
-->
<html>
<head>
<title>jstree</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>

<script>
$(function() {
  var jsondata1;
  jsondata1 =
  [
    {
      "id": "1",
      "parent": "#",
      "text": "1 node"
    },
    {
      "id": "2",
      "parent": "#",
      "text": "2 node"
    },
    {
      "id": "3",
      "parent": "#",
      "text": "3 node"
    },
    {
      "id": "2-1",
      "parent": "2",
      "text": "2-1 node"
    },
    {
      "id": "2-2",
      "parent": "2",
      "text": "2-2 node"
    },
    {
      "id": "2-3",
      "parent": "2",
      "text": "2-3 node"
    },
    {
      "id": "2-2-1",
      "parent": "2-2",
      "text": "2-2-1 node"
    }
  ]
  
  $('#jstree1').jstree({ 
      //"plugins" : [ "wholerow", "checkbox", "changed" ],
    'core' : {
      "check_callback": true,
      'data' : jsondata1
    }
  });
  
  $('#jstree1')
    // listen for event
    .on('changed.jstree', function(e, data) {
      
      var i, j, r = [];
      //선택한 노드 배열
      for (i = 0, j = data.selected.length; i < j; i++) {
        r.push(data.instance.get_node(data.selected[i]).id);
      }
      
      //노드 opened
      var opened=$("#jstree1").jstree('get_node', r[0]).state.opened;  
      if (opened){
        //node close
        $('#jstree1').jstree("close_node","#" + r[0]);
      }
      else{
        //node open
        $('#jstree1').jstree("open_node","#" + r[0]);
      }
      
      var str;
      str = 'Selected : ' + r.join(', ');
      str = str + '<br>' + 'opened : ' + r[0] + '=' + opened;
      $('#divRst1').append(str);
  });

  $('#jstree1').on({
    //triggered after all nodes are finished loading
    'ready.jstree': function (e, data) {
      $('#divRst1').append('<br>' + 'ready.jstree');
    },
    //triggered when a node is created
    'create_node.jstree': function(e, data) {
      $('#divRst1').append('<br>' + 'create_node.jstree');
    }
  });
  
  $('#btnCreate').click(function() {
    //create_node ([par, node, pos, callback, is_loaded])
    // * "check_callback": true 로 되어 있어야 node create가 가능함.
    //par : the parent node (to create a root node use either "#" (string) or null)
    //node : the data for the new node (a valid JSON object, or a simple string with the name)
    //pos : the index at which to insert the node, "first" and "last" are also supported, default is "last"
    //callback : a function to be called once the node is created
    //is_loaded : internal argument indicating if the parent node was succesfully loaded
    $('#jstree1').jstree().create_node('#', {
      "id": "4",
      "text": "4 node"
    }, "last", function() {
      $('#divRst1').append('<br>' + "Parent created");
    });

    $('#jstree1').jstree().create_node('1', {
      "id": "c3",
      "text": "Child 3"
    }, "last", function() {
      $('#divRst1').append('<br>' + "Child created");
    });

    $('#jstree1').jstree('create_node', 'p3', {
      "id": "c4",
      "text": "Child 4"
    }, "last", function() {
      $('#divRst1').append('<br>' + "Child created");
    });
    
  });  
});

// When the document is ready
$(document).ready(function() {
  $('#divRst1').append('ready');
});
</script>

</head>
<body>
<div style="margin: 0px 0px 0px 0px; padding:10px 10px 10px 10px;border: 1px ridge #bcbcbc;background-color:skyblue">  
* jstree
<div id="jstree1"></div>
<div id="divRst1"></div>
<button id="btnCreate">create node</button>
</div>
</body>
</html>
[jsTree] create node dynamic

Follow

Newsletter
