js实现treeselect
实现 TreeSelect 的基本思路
TreeSelect 是一种结合了树形结构和下拉选择功能的组件，常用于展示层级数据并允许用户选择。以下是使用 JavaScript 实现 TreeSelect 的核心步骤。
数据结构设计
通常使用嵌套的节点结构表示树形数据，每个节点包含 id、label、children 等属性：
const treeData = [
{
id: '1',
label: 'Node 1',
children: [
{
id: '1-1',
label: 'Node 1-1',
},
],
},
];渲染树形结构
通过递归渲染树节点，生成可折叠的树形 UI：
function renderTreeNode(node) {
return `
<div class="tree-node">
<span class="toggle">${node.children ? '▶' : ''}</span>
<span>${node.label}</span>
${node.children ? renderTree(node.children) : ''}
</div>
`;
}
function renderTree(data) {
return `<div class="tree">${data.map(renderTreeNode).join('')}</div>`;
}下拉框集成
将树形组件嵌入下拉框中，并处理展开/折叠逻辑：
function toggleNode(event) {
const node = event.currentTarget.closest('.tree-node');
const children = node.querySelector('.tree');
if (children) children.classList.toggle('collapsed');
}
document.querySelectorAll('.toggle').forEach(toggle => {
toggle.addEventListener('click', toggleNode);
});选择逻辑实现
添加点击事件监听器以捕获用户选择，并更新下拉框显示：
function handleSelect(event) {
const selectedLabel = event.currentTarget.querySelector('span:last-child').textContent;
document.querySelector('.select-input').value = selectedLabel;
closeDropdown();
}
document.querySelectorAll('.tree-node').forEach(node => {
node.addEventListener('click', handleSelect);
});完整组件封装
将上述功能封装为可复用的类：
class TreeSelect {
constructor(selector, data) {
this.container = document.querySelector(selector);
this.data = data;
this.init();
}
init() {
this.render();
this.bindEvents();
}
render() {
this.container.innerHTML = `
<div class="select-input"></div>
<div class="dropdown">${renderTree(this.data)}</div>
`;
}
}样式设计要点
通过 CSS 实现树形结构的视觉层级和交互状态：
.tree-node {
padding-left: 20px;
cursor: pointer;
}
.tree-node:hover {
background: #f0f0f0;
}
.collapsed {
display: none;
}
.dropdown {
border: 1px solid #ddd;
max-height: 300px;
overflow-y: auto;
}性能优化建议
对于大型树数据，可采用虚拟滚动技术：
function virtualScroll() {
// 仅渲染可视区域内的节点
}扩展功能方向
- 支持多选模式
- 添加搜索过滤功能
- 实现异步加载子节点
- 提供自定义节点模板
以上实现方案可根据具体需求进行调整和扩展。核心在于合理的数据结构设计和事件处理机制。
