Press "Enter" to skip to content

Pure Javascript File Tree Filter From JSON Input | js-directory-tree

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

    Leave a Reply

    Your email address will not be published.