JavaScript 기반의 트리 드롭다운 상자 구현-프런트엔드 Q&A-php.cn

JavaScript 기반의 트리 드롭다운 상자 구현

WBOY

풀어 주다： 2023-05-12 18:12:09

원래의

1152명이 탐색했습니다.

머리말

일반적인 양식 요소인 트리 드롭다운 상자는 웹 개발에서도 매우 일반적입니다. 대부분의 경우 드롭다운 상자의 옵션을 정적으로 초기화한 다음 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, name, parentId 및 level이 포함됩니다.

드롭다운 상자 생성

데이터 소스를 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);

로그인 후 복사

여기서 옵션 요소를 생성하고 해당 값과 innerHTML 속성을 설정합니다. 여기서 innerHTML에는 노드의 계층 정보가 포함됩니다. 그런 다음 선택 요소에 옵션 요소를 삽입합니다.

3. 결론

이제 JavaScript를 사용하여 간단한 트리 드롭다운 상자를 구현했습니다. 실제로 실제 개발에서는 노드의 상태를 처리하는 방법, 노드 검색을 구현하는 방법, 노드의 비동기 로딩을 구현하는 방법 등 더 자세한 내용을 고려해야 합니다. 하지만 이 기사를 통해 JavaScript를 사용하여 기본 트리 드롭다운 상자를 구현하는 방법을 배울 수 있습니다. 도움이 되길 바랍니다.

위 내용은 JavaScript 기반의 트리 드롭다운 상자 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!