纯JavaScript实现可过滤的文件夹/目录树

纯JavaScript实现可过滤的文件夹/目录树

一个纯JavaScript实现的文件夹/目录树控件,过滤子目录或者顶级目录下的所有子目录。

使用方法

创建一个空容器存放文件夹数

<div id="folders"></div>

通过下面的JSON结构创建目录子节点

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'
        }
      ]
    }
  ]
};

目录树的主要javascript代码

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));
  }
}
打赏
下载 在线预览 积分 (-2) 吐槽 (2)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽