Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html>
- <head>
- <title>jstree test</title>
- <style>
- html { margin:0; padding:0; font-size:62.5%; }
- body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
- h1 { font-size:1.8em; }
- .demo { overflow:auto; border:1px solid silver; min-height:100px; }
- </style>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default/style.min.css" />
- </head>
- <body>
- <div id="testtree">
- <ul>
- <li id="1" title="ID:1"><a>Fruits and Vegetables</a>
- <ul>
- <li id="11" title="ID:11"><a>Fruit</a>
- <ul>
- <li id="111" title="ID:111"><a>Apple</a></li>
- <li id="112" title="ID:112"><a>Banana</a></li>
- </ul>
- </li>
- <li id="12" title="ID:12"><a>Vegetables</a>
- <ul>
- <li id="121" title="ID:121"><a>Zucchini</a></li>
- <li id="122" title="ID:122"><a>Tomato</a>
- <ul>
- <li id="1221" title="ID:1221"><a>Red Tomato</a></li>
- <li id="1222" title="ID:1222"><a>Green Tomato</a></li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- </div>
- <button>Summary</button>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/jstree.min.js"></script>
- <script>
- $(document).ready(function() {
- $('#testtree').jstree({
- 'plugins' : [ "checkbox", "contextmenu", "dnd", "massload", "search", "sort", "state", "types", "unique", "wholerow" ]
- });
- })
- var button = document.querySelector( "button" );
- button.addEventListener( "click", function( ev ) {
- var id = $("#testtree").jstree("get_selected")
- alert( "Your Selection: "+id);
- }, false);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement