Melaksanakan kotak lungsur turun pokok berdasarkan JavaScript

Kata Pengantar

Sebagai elemen bentuk biasa, kotak lungsur pokok juga sangat biasa dalam pembangunan web. Dalam kebanyakan kes, kami sering memulakan pilihan kotak lungsur turun secara statik, dan kemudian mengubah suai pilihan kotak lungsur turun secara dinamik melalui JavaScript. Walau bagaimanapun, di bawah beberapa keperluan khas, kotak lungsur turun statik tidak lagi dapat memenuhi keperluan, dan kami mungkin perlu menjana kotak lungsur turun berbentuk pokok secara dinamik. Jadi, bagaimana untuk melaksanakan kotak drop-down pokok dengan JavaScript? Berikut adalah kandungan utama artikel ini.

1. Idea pelaksanaan

Sebelum melaksanakan kotak drop-down pokok, kita perlu memahami konsep asas struktur pokok. Dalam struktur pokok, nod boleh mengandungi sebarang bilangan nod anak. Oleh itu, kotak lungsur pokok kami perlu menyokong struktur bersarang ini. Secara umumnya, melaksanakan kotak drop-down pokok boleh dibahagikan kepada langkah-langkah berikut:

1. Pengamatan sumber data: bina tatasusunan untuk menyimpan pilihan kotak drop-down; >Traversal sumber data: merentasi Sumber data, masukkan nod ke dalam kedudukan yang ditentukan dan kemas kini tahap lekukan nod pada masa yang sama
2. penjanaan kotak lungsur: tukar sumber data kepada elemen HTML, dan kemudian masukkannya ke dalam kotak lungsur.
3. 2. Pelaksanaan kod

Proses pelaksanaan mudah diberikan di bawah untuk memahami cara melaksanakan kotak lungsur pokok.

1. Di sini, kami mentakrifkan sumber data untuk merekodkan perhubungan hierarki struktur pepohon:

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

di mana, id Digunakan untuk kenal pasti nod, nama ialah nama nod, parentId ialah id nod induk nod.

Lintas sumber data, masukkan nod ke kedudukan yang ditentukan dan kemas kini tahap lekukan nod. Berikut ialah proses pelaksanaan mudah:

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

Di sini, kami menggunakan objek untuk menyimpan nod anak bagi setiap nod, dan kemudian melakukan traversal rekursif untuk mengira tahap setiap nod. Selepas rekursi berakhir, kami mendapat tatasusunan yang terdiri daripada nod, setiap nod mengandungi id, nama, parentId dan tahap.

Tukar sumber data kepada elemen HTML dan kemudian masukkannya ke dalam kotak lungsur. Proses pelaksanaan mudah diberikan di bawah:

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

Di sini, kami menjana elemen pilihan dan menetapkan nilainya serta atribut innerHTML, di mana innerHTML mengandungi maklumat hierarki nod. Kemudian masukkan elemen pilihan ke dalam elemen pilih.

3. Kesimpulan

Setakat ini, kami telah melaksanakan kotak lungsur pokok mudah menggunakan JavaScript. Malah, dalam pembangunan sebenar, kita masih perlu mempertimbangkan lebih banyak butiran, seperti cara mengendalikan status nod, cara melaksanakan carian nod, cara melaksanakan pemuatan nod tak segerak, dsb. Walau bagaimanapun, melalui artikel ini, kita boleh mempelajari cara menggunakan JavaScript untuk melaksanakan kotak lungsur turun pokok asas. Semoga ia membantu.

Atas ialah kandungan terperinci Melaksanakan kotak lungsur turun pokok berdasarkan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!