JavaScript に基づいたツリー ドロップダウン ボックスの実装

はじめに

一般的なフォーム要素として、ツリー ドロップダウン ボックスも Web 開発では非常に一般的です。ほとんどの場合、ドロップダウン ボックスのオプションを静的に初期化し、その後 JavaScript を通じてドロップダウン ボックスのオプションを動的に変更します。ただし、特殊なニーズによっては、静的なドロップダウン ボックスでは要件を満たすことができなくなり、ツリー状のドロップダウン ボックスを動的に生成する必要がある場合があります。では、JavaScript を使用してツリー ドロップダウン ボックスを実装するにはどうすればよいでしょうか?以下がこの記事の主な内容です。

1. 実装のアイデア

ツリー ドロップダウン ボックスを実装する前に、ツリー構造の基本概念を理解する必要があります。ツリー構造では、ノードには任意の数の子ノードを含めることができます。したがって、ツリー ドロップダウン ボックスは、この入れ子構造をサポートする必要があります。一般に、ツリー ドロップダウン ボックスの実装は次の手順に分割できます:

1. データ ソースの初期化: ドロップダウン ボックスのオプションを格納する配列を構築します。 #データ ソースの走査: データ ソースを走査し、指定された位置にノードを挿入し、同時にノードのインデント レベルを更新します。
2. ドロップダウン ボックスの生成: データ ソースを HTML 要素に変換します。それらをドロップダウン ボックスに挿入します。
3. 2. コードの実装

ツリー ドロップダウン ボックスの実装方法を理解するために、簡単な実装プロセスを以下に示します。

データ ソースの初期化

1. ここでは、ツリー構造の階層関係を記録するデータ ソースを定義します。

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

その中で、id が使用されます。ノードを識別するため、name はノードの名前、parentId はノードの親ノード ID です。

データ ソース トラバーサル

データ ソースをトラバースし、指定された位置にノードを挿入し、ノードのインデント レベルを更新します。以下は簡単な実装プロセスです:

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

ここでは、オブジェクトを使用して各ノードの子ノードを保存し、再帰的走査を実行して各ノードのレベルを計算します。再帰が終了すると、ノードで構成される配列が取得されます。各ノードには ID、名前、parentId、およびレベルが含まれます。

ドロップダウン ボックスの生成

データ ソースを HTML 要素に変換し、ドロップダウン ボックスに挿入します。簡単な実装プロセスを以下に示します。

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

ここでは、option 要素を生成し、その値と innerHTML 属性を設定します。innerHTML にはノードの階層情報が含まれます。次に、option 要素を select 要素に挿入します。

3. 結論

これまで、JavaScript を使用して単純なツリー ドロップダウン ボックスを実装しました。実際の開発では、ノードの状態をどのように扱うか、ノード検索をどのように実装するか、ノードの非同期ロードをどのように実装するかなど、さらに詳細な検討が必要です。ただし、この記事を通じて、JavaScript を使用して基本的なツリー ドロップダウン ボックスを実装する方法を学ぶことができます。それが役に立てば幸い。

以上がJavaScript に基づいたツリー ドロップダウン ボックスの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。