Implémentation d'une liste déroulante d'arborescence basée sur JavaScript

Préface

En tant qu'élément de formulaire courant, la liste déroulante arborescente est également très courante dans le développement Web. Dans la plupart des cas, nous initialisons souvent les options de la liste déroulante de manière statique, puis modifions dynamiquement les options de la liste déroulante via JavaScript. Cependant, en cas de besoins particuliers, la liste déroulante statique ne peut plus répondre aux exigences et nous devrons peut-être générer dynamiquement une liste déroulante en forme d'arborescence. Alors, comment implémenter une liste déroulante arborescente avec JavaScript ? Voici le contenu principal de cet article.

1. Idées d'implémentation

Avant d'implémenter la liste déroulante arborescente, nous devons comprendre le concept de base de la structure arborescente. Dans une structure arborescente, un nœud peut contenir n'importe quel nombre de nœuds enfants. Par conséquent, notre liste déroulante arborescente doit prendre en charge cette structure imbriquée. De manière générale, la mise en œuvre d'une liste déroulante arborescente peut être divisée en les étapes suivantes :

1. Initialisation de la source de données : Construisez un tableau pour stocker les options de la liste déroulante ; 🎜#
Parcours de la source de données : parcourez la source de données, insérez des nœuds dans la position spécifiée et mettez à jour le niveau d'indentation du nœud ;
2. Génération de liste déroulante : convertissez la source de données en Éléments HTML, puis insérez-les dans la liste déroulante.

2. Implémentation du code

Un processus d'implémentation simple est donné ci-dessous pour comprendre comment implémenter une liste déroulante arborescente.

Initialisation de la source de données

Ici, nous définissons une source de données pour enregistrer la relation hiérarchique de l'arborescence :

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 },
];

# 🎜🎜#Parmi eux, id est utilisé pour identifier le nœud, name est le nom du nœud et parentId est l'identifiant du nœud parent du nœud.

Parcours de la source de données

2. Parcourez la source de données, insérez le nœud dans la position spécifiée et mettez à jour le niveau d'indentation du nœud. Ce qui suit est un processus d'implémentation simple :

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);

Ici, nous utilisons un objet pour enregistrer les nœuds enfants de chaque nœud, puis effectuons un parcours récursif pour calculer le niveau de chaque nœud. Une fois la récursion terminée, nous obtenons un tableau composé de nœuds, chaque nœud contient l'identifiant, le nom, le parentId et le niveau.

Génération de liste déroulante

3. Convertissez la source de données en éléments HTML puis insérez-les dans la liste déroulante. Un processus d'implémentation simple est donné ci-dessous :

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);

Ici, nous générons un élément d'option et définissons sa valeur et ses attributs innerHTML, où innerHTML contient les informations hiérarchiques du nœud. Insérez ensuite l'élément option dans l'élément select.

3. Conclusion

Jusqu'à présent, nous avons implémenté une simple liste déroulante en utilisant JavaScript. En fait, dans le développement réel, nous devons considérer plus de détails, tels que comment gérer l'état des nœuds, comment implémenter la recherche de nœuds, comment implémenter le chargement asynchrone des nœuds, etc. Cependant, grâce à cet article, nous pouvons apprendre à utiliser JavaScript pour implémenter une liste déroulante d'arborescence de base. J'espère que ça aide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!