Tree View

                        <div class="js-tree-1"> <ul> <li>Root node 1 <ul> <li data-jstree='{ "selected" : true }'><a href="#"><em>initially</em> <strong>selected</strong></a></li> <li data-jstree='{ "icon" : "//jstree.com/tree-icon.png" }'>custom icon URL</li> <li data-jstree='{ "opened" : true }'>initially open <ul> <li>Another node</li> </ul> </li> <li data-jstree='{ "icon" : "fa fa-comments-o" }'>Custom icon class (FontAwesome)</li> </ul> </li> <li><a href="//www.jstree.com">Root node 2</a></li> </ul> </div> <script> $('.js-tree-1').jstree(); </script>
                    

                        <div class="js-tree-2"></div> <script> $('.js-tree-2').jstree({ 'plugins':['wholerow', 'checkbox'], 'core' : { 'data' : [ { 'text' : 'Same but with checkboxes', 'children' : [ { 'text' : 'initially selected', 'state' : { 'selected' : true } }, { 'text' : 'custom icon URL', 'icon' : '//jstree.com/tree-icon.png' }, { 'text' : 'initially open', 'state' : { 'opened' : true }, 'children' : [ 'Another node' ] }, { 'text' : 'custom icon class', 'icon' : 'fa fa-comments-o' } ] }, 'And wholerow selection' ] } }); </script>