Smooth Collapsible Tree View Plugin with jQuery - TreeViewJS
File Size: | 6.29 KB |
---|---|
Views Total: | 16083 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

TreeViewJS is a jQuery plugin that takes data from a big nested list or JSON strings and presents them in an expanding and collapsing tree view.
Basic usage:
1. Include the jQuery TreeViewJS plugin after jQuery library.
<script src="jquery.min.js"></script> <script src="jquery.treeView.js"></script>
2. Create a nested list for the tree view.
<ul class="treeview"> <li> item 1 <ul> <li>subitem 1</li> <li>subitem 2</li> </ul> </li> <li>Foo Item</li> <li> Countries <ul> <li>United States <ul> <li>New York</li> <li>San Francisco</li> <li>Chicago</li> <li>Los Angeles</li> </ul> </li> <li>United Kingdom</li> <li>China</li> <li>India <ul> <li>New Delhi</li> <li>Mumbai</li> <li>Chennai</li> <li>Kolkata</li> </ul> </li> <li>Russia</li> <li>France</li> <li>Germany</li> </ul> </li> </ul>
3. Initialize the tree view plugin and done.
$('.treeview').treeView();
4. Present your JSON data in the tree view.
<code id="treeModel"> JSON DATA HERE </code> <ul class="treeview" id="dataTree"></ul> <script> // load the data tree var $dataTree = $('#dataTree'); var model = JSON.parse($('#treeModel').html()); $dataTree.treeView(model); </script>
5. Style the tree view.
.treeview, .treeview ul { list-style-type: none; overflow: hidden; } .treeview li { text-indent: 1%; margin-top: 0.2em; padding: 0.15em 0 0.5em 1.5em; line-height: 22px; background-repeat: no-repeat; background-size: 24px 24px; } .treeview li.contains-items { background-image: url('icons/arrow-left.png'); } .treeview li.items-expanded { background-image: url('icons/arrow-down.png'); } .treeview>li:hover { cursor: pointer; } .treeview span:hover { background-color: rgba(246, 246, 246, 0.7); }
6. Functions.
// Expands all the nodes of treeviews $('.treeview').treeView('expandAll'); // Collapses all the nodes of treeviews $('.treeview').treeView('collapseAll');
7. Default options.
// treeview data model model: null, // use <span> to build model useSpan: false, // add icons to nodes imageList: [], // the tree is expanded expanded: false
Changelog:
2015-02-18
- Add more configuration options namely, model, useSpan, imageList and expanded
- TreeNode icons
- Fixed model buliding bug
2015-02-16
- Fix scroll on small screens
- More configurable editor
This awesome jQuery plugin is developed by samarsault. For more Advanced Usages, please check the demo page or visit the official website.