JavaScript に基づいたツリードロップダウンボックスの実装-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-12 18:12:09

オリジナル

1113 人が閲覧しました

はじめに

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

1. 実装のアイデア

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

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

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

データソースの初期化

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

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、およびレベルが含まれます。

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

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 サイトの他の関連記事を参照してください。