如何用JS/jQuery自动排序并展示从文件/数据库读取的文件夹层级结构？

Absolutely! You can easily parse, sort, and render those folder paths into a clean, nested structure using vanilla JavaScript or jQuery—perfect for integrating with your Perl CGI setup. Here's a complete, actionable approach:

Step 1: Pass Folder Paths from Perl CGI to JavaScript #

First, you’ll need to get your Perl-retrieved folder paths into a format JavaScript can use. Convert Windows backslashes to forward slashes (easier for string splitting) and output the paths as a JSON array:

# In your Perl CGI script
use JSON; # Make sure you have this module installed (cpanm JSON)

my @folder_paths = (
    'A\\A1\\A2\\A3',
    'A\\B\\B1\\B2',
    'A\\B\\B4\\B5\\B5',
    'A\\C\\C1\\C2'
);

# Convert Windows backslashes to forward slashes for JS compatibility
s/\\/\//g foreach @folder_paths;

# Output as a JavaScript variable
print "<script>\n";
print "var folderPaths = " . encode_json(\@folder_paths) . ";\n";
print "</script>\n";

Step 2: Build a Nested Folder Tree Structure #

Write a JavaScript function to convert the flat path list into a hierarchical tree. This will make it easy to render nested lists:

function buildFolderTree(paths) {
    // Root node (we'll skip this later to start with 'A')
    const root = { name: 'Root', children: {} };

    paths.forEach(path => {
        let currentNode = root;
        // Split each path into individual folder segments
        const segments = path.split('/');
        
        segments.forEach(segment => {
            // Create a new node if it doesn't exist
            if (!currentNode.children[segment]) {
                currentNode.children[segment] = { name: segment, children: {} };
            }
            // Move down the tree
            currentNode = currentNode.children[segment];
        });
    });

    return root;
}

Step 3: Sort the Tree Alphabetically #

Add sorting logic to ensure folders are displayed in alphabetical order at every level:

function sortTreeNodes(node) {
    // Convert children from object to sorted array
    node.children = Object.values(node.children).sort((a, b) => {
        // Use localeCompare for proper alphabetical sorting (supports special characters)
        return a.name.localeCompare(b.name);
    });
    // Recursively sort child nodes
    node.children.forEach(sortTreeNodes);
}

Step 4: Render the Tree to HTML #

Use vanilla JavaScript to render the sorted tree as nested <ul>/<li> elements. First, add a container to your HTML:

<!-- In your CGI-generated HTML -->
<div id="folder-tree-container"></div>

Then add the render function and initialize it when the page loads:

function renderTree(node, parentElement) {
    const listItem = document.createElement('li');
    listItem.textContent = node.name;

    // Add nested list if the node has children
    if (node.children.length > 0) {
        const nestedList = document.createElement('ul');
        node.children.forEach(child => renderTree(child, nestedList));
        listItem.appendChild(nestedList);
    }

    parentElement.appendChild(listItem);
}

// Initialize when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
    const folderTree = buildFolderTree(folderPaths);
    const container = document.getElementById('folder-tree-container');
    
    // Skip the root node and render its direct children (starting with 'A')
    sortTreeNodes(folderTree);
    folderTree.children.forEach(child => renderTree(child, container));
});

jQuery Alternative (If You Prefer) #

If you’re already using jQuery in your setup, you can simplify the render function:

function renderTreeWithjQuery(node, parentElement) {
    const $listItem = $('<li>').text(node.name);

    if (node.children.length > 0) {
        const $nestedList = $('<ul>');
        node.children.forEach(child => renderTreeWithjQuery(child, $nestedList));
        $listItem.append($nestedList);
    }

    $(parentElement).append($listItem);
}

// Initialize with jQuery
$(document).ready(() => {
    const folderTree = buildFolderTree(folderPaths);
    const $container = $('#folder-tree-container');
    
    sortTreeNodes(folderTree);
    folderTree.children.forEach(child => renderTreeWithjQuery(child, $container));
});

This will output a clean, sorted nested list that matches your folder structure—no manual HTML coding needed!

内容的提问来源于stack exchange，提问作者Surajit Mitra