js-directory-tree is a pure JavaScript implementation of a folder/directory tree control that allows filtering of child nodes on the client-side.
folder tree javascript, display folder structure in html, hierarchical tree structure in html css, javascript tree view, jstree alternatives
jQuery File Browser Plugin for Creating OS Like File Browsers
How to make use of it:
1. Create an empty container to place the folder tree.
<div id="folders"></div>
2. Create a filed search to filter the folder tree.
<input placeholder="filter..." id="filterInput" oninput="solve()" type="text"/>
3. Add nodes to the folder tree following the JSON structure as follows:
const folders = { type: 'dir', name: 'app', children: [ { type: 'file', name: 'index.html' }, { type: 'dir', name: 'js', children: [ { type: 'file', name: 'main.js' }, { type: 'file', name: 'app.js' }, { type: 'file', name: 'misc.js' }, { type: 'dir', name: 'vendor', children: [ { type: 'file', name: 'jquery.js' }, { type: 'file', name: 'underscore.js' } ] } ] }, { type: 'dir', name: 'css', children: [ { type: 'file', name: 'reset.css' }, { type: 'file', name: 'main.css' } ] } ] };
4. Main javascript to activate folder tree.
function displayJsonTree( data) { var htmlRetStr = "<ul class='folder-container'>"; for (var key in data) { if (typeof(data[key])== 'object' && data[key] != null) { htmlRetStr += displayJsonTree( data[key] ); htmlRetStr += '</ul></li>'; } else if(data[key]=='dir'){ htmlRetStr += "<li class='folder-item'>" + data["name"]+"</li><li class='folder-wrapper'>"; } else if( key=='name' && data['type']!='dir' ){ htmlRetStr += "<li class='file-item'>" + data['name']+"</li>"; } } return( htmlRetStr ); } function filterJson(data,string) { arr = []; for (var key in data) if (typeof(data[key]) == 'object' && data[key] != null) { if (data['name'].indexOf(string) <= -1) { for (var i = 0; i < data.children.length; i++) { arr=arr.concat(filterJson(data.children[i], string)); } return arr; } } else { if (data['name'].indexOf(string) > -1) { arr = arr.concat(data); return arr; } } } document.getElementById("folders").innerHTML= displayJsonTree(folders); function solve() { var toSearch=document.getElementById('filterInput').value; if(toSearch.length==0){ document.getElementById("folders").innerHTML= displayJsonTree(folders); } else { var str = "Searching for: " + document.getElementById('filterInput').value ; document.getElementById("searchingFor").innerHTML = str; document.getElementById("folders").innerHTML = displayJsonTree(filterJson(folders, document.getElementById('filterInput').value)); } }
Filterable Folder Tree, js-directory-tree Plugin/Github
See Demo And Download
Official Website(nicutimofte): Click Here
This superior jQuery/javascript plugin is developed by nicutimofte. For extra Advanced Usages, please go to the official website.
Be First to Comment