deep-level-nesting-folder-tree-sctructure

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Folder Tree</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
</head>
<body>
    <h1>Folder Tree Example</h1>
    <div id="folderTree"></div>

    <script>
        const data = {
            "Main-Folder": {
                "00 - Vertrieb": {
                    "10 - Auftragsbestätigung": [],
                    "60 - Korrespondenz": [],
                    "90 - Transport": []
                },
                "10 - Projektleitung": {
                    "10 - Anlagendatenblatt": [],
                    "20 - Lastenheft": [],
                    "30 - Terminpläne": [],
                    "50 - Projektbuch": [],
                    "60 - Korrespondenz": [],
                    "70 - Meetings": [],
                    "80 - Nachträge": [],
                    "90 - Sonstiges": []
                },
                "20 - Mech. Entwicklung": {
                    "10 - Layout": [],
                    "20 - Pneumatik": [],
                    "30 - Medientabelle": [],
                    "40 - Baugruppen": [],
                    "50 - Hydraulik": [],
                    "60 - Schließeinheit": [],
                    "70 - Kopf": [],
                    "90 - Wasser": []
                },
                "30 - Elektr. Entwicklung": {
                    "10 - Dokumente": [],
                    "20 - Software": [],
                    "30 - Protokolle": [],
                    "50 - Sonstiges": []
                },
                "40 - Produktion": {
                    "10 - Label": [],
                    "20 - Mech. Prüfung": [],
                  ...