Hierarchical Directory List with jQuery and Bootstrap3 - directoryTree

directoryTree.js is a jQuery plugin for displaying file paths as an interactive, hierarchical directory list (tree structure) in Bootstrap 3. Allows only one value selected at a time (radio button) or multiple (checkboxes).

How to use it:

1. Load jQuery library and the jQuery directoryTree plugin in your Bootstrap-built project.

<link rel="stylesheet" href="path/to/bootstrap.min.css>
<link rel="stylesheet" href="path/to/directoryTree.css">
...
<script src="path/to/jquery.min.js"></script>
<script src="path/to/directoryTree.js"></script>

2. Create a container for the directory tree.

<div id="directoryTree_container"></div>

3. Create buttons to expand/collapse all the nodes.

<button type="button" class="directoryTree_expand">
  Expand All
</button>
<button type="button" class="directoryTree_collapse">
  Collapse All
</button>

4. Create an array of items for the directory tree.

var filepaths = ["node 1", "node 2", "node 3", ... ];

5. Attach the plugin to an element. Select multiple items paramater is false.

$('#directoryTree_container').directoryTree([filepaths, false]);

6. Enable the expand/collapse buttons.

$('.directoryTree_expand').click(function (e) {
  $('#directoryTree_container').data('directoryTree').expandAll();
});

$('.directoryTree_collapse').click(function (e) {
  $('#directoryTree_container').data('directoryTree').collapseAll();
});

7. CSS classes/behavior parameters.

var containerClassname = "directoryTree";
var selectElementClassname = 'directorytree-select';
var rootSelectElementClassname = 'directorytree-rootselect';
var firstLevelULClassname = 'firstlevel-ul';
var childULClassname = 'child-ul';
var hasChildrenClassname = 'has-children';
var noChildrenClassname = 'no-children';
var slideSpeed = 150;

About author:

Author: Sam Scott

Website: http://samzscott.com/

---

This awesome jQuery plugin is developed by samzscott. For more Advanced Usages, please check the demo page or visit the official website.