<!DOCTYPE html> <html> <head> <title>jstree</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/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.2.1/jstree.min.js"></script> <script> $(function() { var jsondata1; var jsondata2; jsondata1 = [ { "id" : "ajson1", "text" : "Simple root node"}, { "id" : "ajson2", "text" : "Simple root node", "children":[{"id":"2-1", "text":"2-1 노드"}, {"id":"2-2", "text":"2-2 노드", "state":{"opened":true, "selected":true}}, {"id":"2-3", "text":"2-3 노드"}]}, { "id" : "ajson3", "text" : "Simple root node", "children":[{"id":"3-1", "text":"3-1 노드"}, {"id":"3-2", "text":"3-2 노드"}, {"id":"3-3", "text":"3-3 노드"}]} ] jsondata2 = [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" } ] $('#jstree1').jstree({ "plugins" : [ "wholerow", "checkbox", "changed" ], 'core' : { 'data' : [ { "id" : "ajson1", "text" : "Simple root node"}, { "id" : "ajson2", "text" : "Simple root node", "children":[{"id":"2-1", "text":"2-1 노드"}, {"id":"2-2", "text":"2-2 노드", "state":{"opened":true, "selected":true}}, {"id":"2-3", "text":"2-3 노드"}]}, { "id" : "ajson3", "text" : "Simple root node", "children":[{"id":"3-1", "text":"3-1 노드"}, {"id":"3-2", "text":"3-2 노드"}, {"id":"3-3", "text":"3-3 노드"}]} ] } }); $('#jstree2').jstree({ "plugins" : [ "wholerow", "checkbox", "changed" ], 'core' : { 'data' : jsondata2 } }); $('#jstree2') // 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); } $('#event_result').html('Selected: ' + r.join(', ')); }); }); $(document).ready(function() { }); </script> </head> <body> jstree1 <div id="jstree1"></div> <p> jstree2 <div id="jstree2"></div> <div id="event_result"></div> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
