如果我给出定义的文件夹路径，则在 bootstrap 或 HTML 页面中显示文件夹结构

Question

我正在从文件或通过查询数据库读取文件夹路径，输出如下：

以下A为父文件夹，其余为子文件夹。

A\A1\A2\A3
A\B\B1\B2
A\B\B4\B5\B5
A\C\C1\C2

我想通过读取路径在网页中显示文件夹结构。

有没有JavaScript或jquery或者自动按结构排序显示的功能？

我正在使用 CGI 脚本 (Perl & HTML) 来显示结构。所以用Perl排序显示的想法也会是一个解决方案。

Answer 1

这里有两个函数：

convert() 会将您的输入字符串转换为表示文件夹结构的对象（对象键名称表示文件夹名称；嵌套文件夹将是子对象。）（请注意 \ 是一个javascript 中的转义字符；如果你想将它用作定界符，你需要像我在此处所做的那样转义该字符 (\)；或者使用转发可能更方便而是斜线。我已经开始将您的输入转换为路径数组——如有必要，您可能需要在换行符上拆分输入以达到这一点。）

drawFolders() 获取该对象并将其作为一组嵌套列表绘制到 DOM 中。这是尽可能简单的显示，但应该足以作为更精细的显示选项的起点。

// Converts your input data into an object:
var convert = function(input) {
  var output = {};
  // iterate through each path in the input array:
  input.forEach(function(path) {
    var folders = path.split("\"); // convert this path into an array of folder names
    // "parent" serves as a marker in the output object pointing to the current folder
    var parent = output; // the topmost folder will be a child of the output root
    folders.forEach(function(f) {
      parent[f] = parent[f] || {}; // add a folder object if there isn't one already
      parent = parent[f]; // the next part of the path will be a child of this part
    });
  });
  return (output);
}

// Draws nested lists for the folder structure
var drawFolders = function(input) {
  var output = "<ul>";
  Object.keys(input).forEach(function(k) { 
    output += "<li>" + k; // draw this folder
    if (Object.keys(input[k]).length) {
      output += drawFolders(input[k]); // recurse for child folders
    }
    output += "</li>";
  });
  output += "</ul>";
  return output;
}

var input = [
  "A\A1\A2\A3",
  "A\B\B1\B2",
  "A\B\B4\B5\B5",
  "A\C\C1\C2"
];
document.getElementById("output").innerHTML = drawFolders(convert(input));

<div id="output"></div>

如果我给出定义的文件夹路径，则在 bootstrap 或 HTML 页面中显示文件夹结构

Display the folder structure in bootstrap or HTML Page if I give the folders path defined

javascript

perl

jquery

cgi