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>