js实现comboxtree

实现 ComboTree 的 JavaScript 方法

ComboTree 是一种结合下拉框（ComboBox）和树形结构（Tree）的交互组件，常用于层级数据的选择（如地区选择、分类选择等）。以下是基于 JavaScript 和 HTML 的实现方法。

基础 HTML 结构

创建一个基础的 HTML 结构，包含一个输入框和一个隐藏的树形容器：

<div class="combotree-container">
  <input type="text" id="combotree-input" placeholder="请选择" readonly>
  <div id="tree-container" class="tree-container" style="display: none;">
    <ul id="tree-root"></ul>
  </div>
</div>

样式设计

通过 CSS 控制下拉树形的显示和布局：

.combotree-container {
  position: relative;
  width: 200px;
}

.tree-container {
  position: absolute;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background: white;
  z-index: 1000;
}

.tree-container ul {
  list-style: none;
  padding-left: 20px;
}

.tree-container li {
  cursor: pointer;
  padding: 5px;
}

.tree-container li:hover {
  background-color: #f0f0f0;
}

树形数据加载

使用 JavaScript 动态加载树形数据并渲染：

const treeData = [
  {
    label: "节点1",
    children: [
      { label: "子节点1-1" },
      { label: "子节点1-2" }
    ]
  },
  {
    label: "节点2",
    children: [
      { label: "子节点2-1" },
      { label: "子节点2-2" }
    ]
  }
];

function renderTree(data, parentElement) {
  data.forEach(item => {
    const li = document.createElement("li");
    li.textContent = item.label;
    parentElement.appendChild(li);

    if (item.children) {
      const ul = document.createElement("ul");
      li.appendChild(ul);
      renderTree(item.children, ul);
    }
  });
}

document.addEventListener("DOMContentLoaded", () => {
  const treeRoot = document.getElementById("tree-root");
  renderTree(treeData, treeRoot);
});

交互逻辑

实现点击输入框显示/隐藏树形结构，并支持选择节点：

const input = document.getElementById("combotree-input");
const treeContainer = document.getElementById("tree-container");

input.addEventListener("click", (e) => {
  e.stopPropagation();
  treeContainer.style.display = treeContainer.style.display === "none" ? "block" : "none";
});

document.addEventListener("click", () => {
  treeContainer.style.display = "none";
});

treeContainer.addEventListener("click", (e) => {
  e.stopPropagation();
  if (e.target.tagName === "LI") {
    input.value = e.target.textContent;
    treeContainer.style.display = "none";
  }
});

动态加载数据

支持异步加载子节点数据（如通过 API）：

function loadChildren(parentElement, parentData) {
  // 模拟异步加载
  setTimeout(() => {
    const newData = [
      { label: "动态子节点1" },
      { label: "动态子节点2" }
    ];
    renderTree(newData, parentElement);
  }, 500);
}

treeContainer.addEventListener("click", (e) => {
  if (e.target.tagName === "LI" && !e.target.querySelector("ul")) {
    const ul = document.createElement("ul");
    e.target.appendChild(ul);
    loadChildren(ul, e.target.dataset);
  }
});

封装为可复用组件

将上述逻辑封装为一个类，方便复用：

class ComboTree {
  constructor(options) {
    this.inputId = options.inputId;
    this.treeContainerId = options.treeContainerId;
    this.data = options.data;
    this.init();
  }

  init() {
    this.renderTree(this.data, document.getElementById(this.treeContainerId));
    this.bindEvents();
  }

  bindEvents() {
    const input = document.getElementById(this.inputId);
    const treeContainer = document.getElementById(this.treeContainerId);

    input.addEventListener("click", (e) => {
      e.stopPropagation();
      treeContainer.style.display = treeContainer.style.display === "none" ? "block" : "none";
    });

    treeContainer.addEventListener("click", (e) => {
      if (e.target.tagName === "LI") {
        input.value = e.target.textContent;
        treeContainer.style.display = "none";
      }
    });
  }
}

使用第三方库

如果需要更复杂的功能（如搜索、多选等），可以直接使用开源库：

1. jQuery ComboTree:
   GitHub 地址

   $("#combotree-input").comboTree({
     source: treeData,
     isMultiple: false
   });

2. Bootstrap Treeview:
   结合 Bootstrap 的下拉树形组件。

   

以上方法提供了从零实现 ComboTree 的完整流程，同时推荐了第三方库的快速集成方案。根据需求选择适合的方式即可。