Implementierung einer Baum-Dropdown-Box basierend auf JavaScript

Vorwort

Als häufiges Formularelement ist das Baum-Dropdown-Feld auch in der Webentwicklung sehr verbreitet. In den meisten Fällen initialisieren wir die Optionen des Dropdown-Felds häufig statisch und ändern die Optionen des Dropdown-Felds dann dynamisch über JavaScript. Bei einigen besonderen Anforderungen kann das statische Dropdown-Feld jedoch die Anforderungen nicht mehr erfüllen, und wir müssen möglicherweise dynamisch ein baumförmiges Dropdown-Feld generieren. Wie implementiert man also ein Baum-Dropdown-Feld mit JavaScript? Das Folgende ist der Hauptinhalt dieses Artikels.

1. Implementierungsideen

Bevor wir das Baum-Dropdown-Feld implementieren, müssen wir das Grundkonzept der Baumstruktur verstehen. In einer Baumstruktur kann ein Knoten beliebig viele untergeordnete Knoten enthalten. Daher muss unser Baum-Dropdown-Feld diese verschachtelte Struktur unterstützen. Im Allgemeinen kann die Implementierung einer Baum-Dropdown-Box in die folgenden Schritte unterteilt werden:

1. Initialisierung der Datenquelle: Erstellen eines Arrays zum Speichern der Optionen der Dropdown-Box;
2. Durchquerung der Datenquelle: Durchlaufen der Datenquelle und Fügen Sie Knoten an der angegebenen Stelle ein und aktualisieren Sie gleichzeitig die Einrückungsebene des Knotens.
3. Dropdown-Box-Generierung: Konvertieren Sie die Datenquelle in HTML-Elemente und fügen Sie sie dann in die Dropdown-Box ein.

2. Code-Implementierung

Im Folgenden wird ein einfacher Implementierungsprozess beschrieben, um zu verstehen, wie ein Baum-Dropdown-Feld implementiert wird.

1. Initialisierung der Datenquelle

Hier definieren wir eine Datenquelle, um die hierarchische Beziehung der Baumstruktur aufzuzeichnen:

var treeData = [
    { id: 1, name: 'Node 1' },
    { id: 2, name: 'Node 2', parentId: 1 },
    { id: 3, name: 'Node 3', parentId: 1 },
    { id: 4, name: 'Node 4', parentId: 2 },
    { id: 5, name: 'Node 5', parentId: 2 },
    { id: 6, name: 'Node 6', parentId: 3 },
    { id: 7, name: 'Node 7', parentId: 3 },
    { id: 8, name: 'Node 8', parentId: 4 },
    { id: 9, name: 'Node 9', parentId: 4 },
    { id: 10, name: 'Node 10', parentId: 5 },
    { id: 11, name: 'Node 11', parentId: 5 },
    { id: 12, name: 'Node 12', parentId: 6 },
    { id: 13, name: 'Node 13', parentId: 6 },
    { id: 14, name: 'Node 14', parentId: 7 },
    { id: 15, name: 'Node 15', parentId: 7 },
];

Unter diesen wird die ID zur Identifizierung des Knotens verwendet, der Name ist der Name des Knotens und die übergeordnete ID ist die übergeordnete Knoten-ID.

2. Durchquerung der Datenquelle

Durchlaufen Sie die Datenquelle, fügen Sie den Knoten an der angegebenen Position ein und aktualisieren Sie die Einrückungsebene des Knotens. Das Folgende ist ein einfacher Implementierungsprozess:

function buildTree(data) {
    var tree = [], children = {};

    for (var i = 0; i < data.length; i++) {
        var item = data[i], id = item.id, parentId = item.parentId || 0;

        if (!children[parentId]) {
            children[parentId] = [];
        }

        children[parentId].push(item);
    }

    function build(node, level) {
        node.level = level;
        tree.push(node);

        if (children[node.id]) {
            for (var i = 0; i < children[node.id].length; i++) {
                build(children[node.id][i], level + 1);
            }
        }
    }

    if (children[0]) {
        for (var i = 0; i < children[0].length; i++) {
            build(children[0][i], 0);
        }
    }

    return tree;
}

var tree = buildTree(treeData);

Hier verwenden wir ein Objekt, um die untergeordneten Knoten jedes Knotens zu speichern, und führen dann eine rekursive Durchquerung durch, um die Ebene jedes Knotens zu berechnen. Nachdem die Rekursion beendet ist, erhalten wir ein Array bestehend aus Knoten. Jeder Knoten enthält ID, Name, ParentId und Ebene.

3. Dropdown-Box-Generierung

Konvertieren Sie die Datenquelle in HTML-Elemente und fügen Sie diese dann in die Dropdown-Box ein. Ein einfacher Implementierungsprozess ist unten angegeben:

function buildTreeSelect(data, select) {
    select.innerHTML = '';

    for (var i = 0; i < data.length; i++) {
        var option = document.createElement('option');
        option.value = data[i].id;
        option.innerHTML = ' '.repeat(data[i].level * 4) + data[i].name;
        select.appendChild(option);
    }
}

var select = document.getElementById('tree-select');
buildTreeSelect(tree, select);

Hier generieren wir ein Optionselement und legen seinen Wert und die innerHTML-Attribute fest, wobei innerHTML die hierarchischen Informationen des Knotens enthält. Fügen Sie dann das Option-Element in das Select-Element ein.

3. Fazit

An dieser Stelle haben wir eine einfache Baum-Dropdown-Box mit JavaScript implementiert. Tatsächlich müssen wir in der tatsächlichen Entwicklung noch weitere Details berücksichtigen, z. B. wie mit dem Status von Knoten umgegangen wird, wie die Knotensuche implementiert wird, wie das asynchrone Laden von Knoten implementiert wird usw. In diesem Artikel können wir jedoch lernen, wie man mit JavaScript ein einfaches Baum-Dropdown-Feld implementiert. Hoffe es hilft.

Das obige ist der detaillierte Inhalt vonImplementierung einer Baum-Dropdown-Box basierend auf JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!