Nice File Tree View Plugin with jQuery and Bootstrap - File Tree

File Tree is a small jQuery plugin that helps you build a nice clean, sortable and selectable file tree structure from a JSON object. File tree plugin is built on top of jQuery using jQuery UI, jQuery UI Nested Sortable plugin and Bootstrap 3 framework.

Basic Usage:

1. Include the required CSS files in the head section of your page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="dist/css/file-tree.min.css" rel="stylesheet">

2. Include the jQuery file tree plugin together with jQuery library, jQuery UI and Bootstrap's Javascirpt at the end of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script src="dist/js/file-tree.min.js"></script> 

3. Include the jQuery UI Nested Sortable plugin if you wish to build a sortable file tree.

<script src="nestedSortable/jquery.mjs.nestedSortable.js"></script>

4. Create an empty element that will be served as a file tree container.

<div id="demo"></div>

5. Build the data for the file tree and initialize the plugin with optional settings.

<script type="text/javascript">
$(document).ready(function(){
var data = [{
id: 'dir-1',
name: 'Root',
type: 'dir',
children: [
{
id: 'dir-2',
name: 'Sub_dir',
type: 'dir',
children: [{
id: 'file-1',
name: 'file-tree-master.zip',
type: 'zip',
url: '1.zip'
}]
},{
id: 'file-2',
name: 'File tree',
type: 'zip',
url: '2.zip'
}
]
}];

$('#demo').fileTree({
data: data,
sortable: false,
selectable: false
});

});
</script>

---

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