Tree View

jQuery users

Tree view in Pages are powered by jQuery Dynatree , which is a Drag & drop hierarchical list with mouse and touch compatibility Follow these steps to initialize nestables in your page

Step one

Include the following stylesheet inside the <head> 

<link href="assets/plugins/jquery-dynatree/skin/ui.dynatree.css" rel="stylesheet" type="text/css" media="screen"/>

Step two

Include the relevant javascript files inside the <body> before core template script inclusions 

<script src="assets/plugins/jquery-dynatree/jquery.dynatree.min.js" type="text/javascript">

Step three
  1. Create a DIV and give it a unique ID, we are going to use this to initialize the plugin
  2. Inside this DIV, create a list of unordered items using UL LI
  3. Make sure you have unique ID for each of UL and LI tags
<div class="m-b-20" id="default-tree">
  <ul id="treeData" style="display: none;">
    <li id="id1" title="Look, a tool tip!">item1 with key and tooltip
    </li>
    <li id="id2">item2
    </li>
    <li class="folder" id="id3">Folder with some children
      <ul>
        <li id="id3.1">Sub-item 3.1
          <ul>
            <li id="id3.1.1">Sub-item 3.1.1
            </li>
            <li id="id3.1.2">Sub-item 3.1.2
            </li>
          </ul>
        </li>
        <li id="id3.2">Sub-item 3.2
          <ul>
            <li id="id3.2.1">Sub-item 3.2.1
            </li>
            <li id="id3.2.2">Sub-item 3.2.2
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="expanded" id="id4">Document with some children (expanded on
    init)
      <ul>
        <li class="active focused" id="id4.1">Sub-item 4.1 (active and focus on
        init)
          <ul>
            <li id="id4.1.1">Sub-item 4.1.1
            </li>
            <li id="id4.1.2">Sub-item 4.1.2
            </li>
          </ul>
        </li>
        <li id="id4.2">Sub-item 4.2
          <ul>
            <li id="id4.2.1">Sub-item 4.2.1
            </li>
            <li id="id4.2.2">Sub-item 4.2.2
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Step Four

Initialize the plugin, Please view JQuery plugin inlude guidline rules 

<script>
$(document).ready(function() {
      $("#default-tree").dynatree({
       fx: { height: "toggle", duration: 200 }//Slide down animation
    });
});
</script>

For Further Options JQuery DynaTree Documentation

AngularJS users

AngularJS users will have to resort to Angular Bootstrap Nav Tree directive to have treeviews.

Step One

Include the navTree ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step two

Add angularBootstrapNavTree to your module's list of dependencies.

Add list data to scope

$scope.example_treedata = [{
    label: 'North America',
    children: [{
        label: 'Canada',
        children: ['Toronto', 'Vancouver']
    }, {
        label: 'USA',
        children: ['New York', 'Los Angeles']
    }, {
        label: 'Mexico',
        children: ['Mexico City', 'Guadalajara']
    }]
}, {
    label: 'South America',
    children: [{
        label: 'Venezuela',
        children: ['Caracas', 'Maracaibo']
    }, {
        label: 'Brazil',
        children: ['Sao Paulo', 'Rio de Janeiro']
    }, {
        label: 'Argentina',
        children: ['Buenos Aires', 'Cordoba']
    }]
}];
Step three

Add following markup to your page

<abn-tree tree-data="example_treedata"></abn-tree>
For Further Options Angular Boostrap Nav tree Documentation

Other Useful resources thay you may find: