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>BBM-PROJEKTE-STRUKTUR (2025)</h1>
    <div id="folderTree"></div>

    <script>
        const data = {
            "Main-Folder": {
                "000 - Vertrieb": {
                    "010 - Auftragsbestätigung": {
                    	"010 - Auftragserweiterungen": [],
                    },
                    "060 - Korrespondenz": {
                      "010 - Intern": [],
                      "020 - Zulieferer": [],
                      "030 - Kunde": [],
                      "040 - Andere": [],
                    },
                    "090 - Transport": {}
                },
                "010 - Projektleitung": {
                    "010 - Anlagendatenblatt": {
                    	"010 - Archiv": [],
                    },
                    "020 - Lastenheft": {
                    	"010 - Archiv": [],
                    },
                    "030 - Terminpläne": {
                    	"010 - Archiv": [],
                    },
                    "050 - Projektbuch": [],
                    "060 - Korrespondenz": [],
                    "070 - Meetings": {
                    	"10 - Kick Off Intern": [],
                      "20 - Kick Off Extern": [],
                      "30 - 1. Projektmeeting": [],
                      "Übergabemeeting an PROD": [],
                    },
                    "080 - Nachträge": [],
                    "090 - Sonstiges": [],
                },
                "020 - Mech. Entwicklung": {
                   ...

JavaScript

const data = {
            "Main-Folder": {
                "000 - Vertrieb": {
                    "010 - Auftragsbestätigung": {
                    	"010 - Auftragserweiterungen": [],
                    },
                    "060 - Korrespondenz": {
                      "010 - Intern": [],
                      "020 - Zulieferer": [],
                      "030 - Kunde": [],
                      "040 - Andere": [],
                    },
                    "090 - Transport": {}
                },
                "010 - Projektleitung": {
                    "010 - Anlagendatenblatt": {
                    	"010 - Archiv": [],
                    },
                    "020 - Lastenheft": {
                    	"010 - Archiv": [],
                    },
                    "030 - Terminpläne": {
                    	"010 - Archiv": [],
                    },
                    "050 - Projektbuch": [],
                    "060 - Korrespondenz": [],
                    "070 - Meetings": {
                    	"10 - Kick Off Intern": [],
                      "20 - Kick Off Extern": [],
                      "30 - 1. Projektmeeting": [],
                      "Übergabemeeting an PROD": [],
                    },
                    "080 - Nachträge": [],
                    "090 - Sonstiges": [],
                },
                "020 - Mech. Entwicklung": {
                    "010 - Layout": [],
                    "020 - Pneumatik": [],
                    "030 - Medientabelle": [],
                    "040 - Baugruppen": [],
                    "050 - Hydraulik": [],
                    "060 - Schließeinheit": [],
                    "070 - Kopf": [],
                    "090 - Wasser": [],
                },
                "030 - Elektr. Entwicklung": {
                    "010 - Dokumente": {
                    	"010 - Datenblätter": {
                      	"010 - Archiv": [],
                      },
                      "020 - Schaltplan": {
   ...