Отображать структуру папок в начальной загрузке или на странице HTML, если я укажу заданный путь к папкам - PullRequest
Новая
       1

Отображать структуру папок в начальной загрузке или на странице HTML, если я укажу заданный путь к папкам

0 голосов
/ 28 апреля 2018

Я читаю пути к папкам из файла или опрашиваю базу данных, и результат будет следующим:

Рассмотрим ниже A как родительскую папку, а остальные - ее дочерние папки. 

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

Я хочу отобразить структуру папок на веб-странице, прочитав пути.

Существует ли какой-либо JavaScript, jquery или какая-либо функция, которая автоматически сортирует и отображает структурно?

Я использую скрипт CGI (Perl & HTML) для отображения структуры. Поэтому идея сортировки и отображения с помощью Perl также будет решением.

Ответы [ 3 ]

0 голосов
/ 29 апреля 2018 
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
0 голосов
/ 29 апреля 2018 
            <!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>
0 голосов
/ 28 апреля 2018

Вот две функции:

convert() преобразует ваши входные строки в объект, представляющий структуру папок (имена ключей объектов представляют имена папок; вложенные папки будут дочерними объектами.) (Обратите внимание, что \ является escape-символом в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...