js 获取tree选中值

在JavaScript中获取树（Tree）组件的选中值，通常涉及到DOM操作或者使用特定的前端框架/库（如React、Vue等）提供的API。以下是一些基础概念和解决方案：

基础概念

DOM（Document Object Model）：HTML和XML文档的编程接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。
事件监听：在JavaScript中，你可以为DOM元素添加事件监听器，以便在特定事件发生时执行代码。
树形结构：在计算机科学中，树是一种由节点组成的层次结构，每个节点最多只有一个父节点，但可以有多个子节点。

解决方案

使用原生JavaScript

如果你使用的是原生的HTML和JavaScript，你可以通过遍历DOM来获取选中的树节点值。

<ul id="tree">
  <li><input type="checkbox" value="Node1"> Node1
    <ul>
      <li><input type="checkbox" value="Node1.1"> Node1.1</li>
      <li><input type="checkbox" value="Node1.2"> Node1.2</li>
    </ul>
  </li>
  <li><input type="checkbox" value="Node2"> Node2</li>
</ul>

<button onclick="getCheckedValues()">获取选中值</button>

<script>
function getCheckedValues() {
  const tree = document.getElementById('tree');
  const checkboxes = tree.getElementsByTagName('input');
  const checkedValues = [];

  for (let i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].type === 'checkbox' && checkboxes[i].checked) {
      checkedValues.push(checkboxes[i].value);
    }
  }

  console.log(checkedValues);
}
</script>

使用前端框架/库

如果你使用的是React、Vue等前端框架，你可以利用它们提供的状态管理和组件通信机制来获取选中的树节点值。

React 示例

import React, { useState } from 'react';

function TreeNode({ node, onCheck }) {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = () => {
    setIsChecked(!isChecked);
    onCheck(node.value, !isChecked);
  };

  return (
    <li>
      <input type="checkbox" checked={isChecked} onChange={handleChange} />
      {node.name}
      {node.children && node.children.map(child => (
        <TreeNode key={child.value} node={child} onCheck={onCheck} />
      ))}
    </li>
  );
}

function Tree({ data }) {
  const [checkedValues, setCheckedValues] = useState([]);

  const handleCheck = (value, isChecked) => {
    if (isChecked) {
      setCheckedValues([...checkedValues, value]);
    } else {
      setCheckedValues(checkedValues.filter(v => v !== value));
    }
  };

  return (
    <ul>
      {data.map(node => (
        <TreeNode key={node.value} node={node} onCheck={handleCheck} />
      ))}
    </ul>
    <button onClick={() => console.log(checkedValues)}>获取选中值</button>
  );
}

const treeData = [
  { value: 'Node1', name: 'Node1', children: [{ value: 'Node1.1', name: 'Node1.1' }, { value: 'Node1.2', name: 'Node1.2' }] },
  { value: 'Node2', name: 'Node2' }
];

ReactDOM.render(<Tree data={treeData} />, document.getElementById('root'));