Treeview
Last updated 9 months ago
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 nest-tables 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
Create a DIV and give it a unique ID, we are going to use this to initialize the plugin
Inside this DIV, create a list of unordered items using UL LI
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 oninit)<ul><li class="active focused" id="id4.1">Sub-item 4.1 (active and focus oninit)<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
<script>$(document).ready(function() {$("#default-tree").dynatree({fx: { height: "toggle", duration: 200 }//Slide down animation});});</script>