当前位置：首页 > JavaScript

js实现treeselect

2026-03-14 06:35:33JavaScript

实现 TreeSelect 的基本思路

TreeSelect 是一种结合树形结构和下拉选择功能的组件，常用于展示层级数据并允许用户选择。在 JavaScript 中实现 TreeSelect 需要处理树形数据的渲染、交互逻辑以及下拉框的展开/收起功能。

数据结构和初始化

TreeSelect 的核心是树形数据结构，通常使用嵌套对象或数组表示。每个节点包含 label、value 和 children 属性。

const treeData = [
  {
    label: 'Node 1',
    value: 'node1',
    children: [
      {
        label: 'Child 1',
        value: 'child1'
      }
    ]
  }
];

初始化组件时，将数据传递给 TreeSelect 并渲染为可交互的树形结构。

渲染树形结构

使用递归函数渲染树形结构，支持展开/收起子节点。通过 CSS 控制缩进和图标。

js实现treeselect

function renderTreeNode(node, level = 0) {
  return `
    <div class="tree-node" style="padding-left: ${level * 20}px">
      <span class="toggle-icon">${node.children ? '+' : ''}</span>
      <span class="node-label">${node.label}</span>
      ${node.children ? renderTree(node.children, level + 1) : ''}
    </div>
  `;
}

function renderTree(data, level = 0) {
  return data.map(node => renderTreeNode(node, level)).join('');
}

处理交互逻辑

为节点添加点击事件处理程序，支持选择节点和展开/收起子节点。

document.addEventListener('click', e => {
  const toggleIcon = e.target.closest('.toggle-icon');
  if (toggleIcon) {
    const node = toggleIcon.closest('.tree-node');
    const children = node.querySelector('.tree-node');
    children.classList.toggle('collapsed');
    toggleIcon.textContent = children.classList.contains('collapsed') ? '+' : '-';
  }

  const nodeLabel = e.target.closest('.node-label');
  if (nodeLabel) {
    // 处理节点选择逻辑
  }
});

实现下拉框功能

使用绝对定位创建下拉框，并在点击输入框时切换显示状态。

const input = document.querySelector('.treeselect-input');
const dropdown = document.querySelector('.treeselect-dropdown');

input.addEventListener('click', () => {
  dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
});

document.addEventListener('click', e => {
  if (!e.target.closest('.treeselect')) {
    dropdown.style.display = 'none';
  }
});

处理选择逻辑

当用户选择节点时，更新输入框显示的值，并存储选中节点的值。

js实现treeselect

function handleSelect(node) {
  input.value = node.label;
  selectedValue = node.value;
  dropdown.style.display = 'none';
}

样式设计

通过 CSS 实现树形结构的缩进、图标和下拉框样式。

.treeselect {
  position: relative;
  width: 200px;
}

.treeselect-dropdown {
  position: absolute;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  border: 1px solid #ddd;
}

.tree-node {
  cursor: pointer;
}

.toggle-icon {
  margin-right: 5px;
}

.collapsed {
  display: none;
}

完整组件示例

将上述部分组合起来，创建一个完整的 TreeSelect 组件。

<div class="treeselect">
  <input class="treeselect-input" readonly placeholder="请选择" />
  <div class="treeselect-dropdown">
    ${renderTree(treeData)}
  </div>
</div>