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>

Answer 2

            <!DOCTYPE html>
            <html>
            <head>
            <title>Page Title</title>
            <script type="text/javascript">
            $('li').click(function(e){
            e.stopPropagation();
            if(this.getElementsByTagName("ul")[0].style.display =="block")
                    $(this).find("ul").slideUp();
                else
                    $(this).children(":first").slideDown();
            });
            </script>
            <style>
            ul>li>ul {
                display: none;
            }
            </style>


            </head>
            <body>

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

            var input = [
              "A\\A1\\A2\\A3",
              "A\\B\\B1\\B2",
              "A\\B\\B4\\B5\\B5",
              "A\\C\\C1\\C2"
            ];
            // 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;
            }

            document.getElementById("output").innerHTML = drawFolders(convert(input));

            </script>


            </body>
            </html>

Answer 3

print "Content-type:text/html\n\n";
print <<ENDOFTEXT;
<!DOCTYPE html>
<html>
<head>
<title>Folder Structure</title>
</head>
<body>

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

var input = [
"A\\A1\\A2\\A3",
"A\\B\\B1\\B2",
"A\\B\\B4\\B5\\B5",
"A\\C\\C1\\C2",
"A\\B\\B3\\B6"
];
// 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;
}

document.getElementById("output").innerHTML = drawFolders(convert(input));

</script>

</body>`
</html>

ENDOFTEXT

如果我给定义文件夹路径

3 个答案: