如何从JSON数据生成Flutter TreeView树形视图

第一步：将扁平JSON数据转换为嵌套树形结构 #

首先需要把包含parentID、childID、treeName的扁平数据转换成嵌套树形结构，这是动态渲染的基础。以下是JavaScript核心实现逻辑：

function buildTree(data) {
  const nodeMap = new Map();
  const rootNodes = [];

  // 先将所有节点存入映射表，方便后续查找父节点
  data.forEach(item => {
    nodeMap.set(item.childID, {
      id: item.childID,
      name: item.treeName,
      children: []
    });
  });

  // 遍历数据，将子节点挂载到对应父节点下
  data.forEach(item => {
    const node = nodeMap.get(item.childID);
    // 根节点的parentID可根据实际数据调整（比如null、0或特定标识）
    if (item.parentID === null || item.parentID === 0) {
      rootNodes.push(node);
    } else {
      const parentNode = nodeMap.get(item.parentID);
      if (parentNode) {
        parentNode.children.push(node);
      }
    }
  });

  return rootNodes;
}

第二步：动态渲染树形DOM结构 #

通过递归函数将嵌套树形数据渲染成带折叠/展开功能的简易HTML结构：

function renderTree(nodes, container) {
  const ul = document.createElement('ul');
  ul.style.listStyle = 'none';
  ul.style.paddingLeft = '15px';

  nodes.forEach(node => {
    const li = document.createElement('li');
    
    // 折叠/展开按钮
    const toggleBtn = document.createElement('span');
    toggleBtn.textContent = node.children.length > 0 ? '+' : '';
    toggleBtn.style.cursor = 'pointer';
    toggleBtn.style.marginRight = '5px';

    // 节点名称
    const nameSpan = document.createElement('span');
    nameSpan.textContent = node.name;

    li.appendChild(toggleBtn);
    li.appendChild(nameSpan);

    // 有子节点时递归渲染并绑定折叠事件
    if (node.children.length > 0) {
      const childContainer = document.createElement('div');
      childContainer.style.display = 'none'; // 默认折叠子节点
      renderTree(node.children, childContainer);
      li.appendChild(childContainer);

      toggleBtn.addEventListener('click', () => {
        const isHidden = childContainer.style.display === 'none';
        childContainer.style.display = isHidden ? 'block' : 'none';
        toggleBtn.textContent = isHidden ? '-' : '+';
      });
    }

    ul.appendChild(li);
  });

  container.appendChild(ul);
}

第三步：调用示例 #

假设你的JSON数据格式如下，直接调用上述函数即可生成树形视图：

// 示例数据，替换成你的实际JSON数据
const treeData = [
  { parentID: null, childID: 1, treeName: '根节点1' },
  { parentID: 1, childID: 2, treeName: '子节点1-1' },
  { parentID: 1, childID: 3, treeName: '子节点1-2' },
  { parentID: 3, childID: 4, treeName: '子节点1-2-1' },
  { parentID: null, childID: 5, treeName: '根节点2' }
];

// 构建树形结构
const tree = buildTree(treeData);
// 渲染到页面指定容器（比如id为tree-container的div）
const container = document.getElementById('tree-container');
renderTree(tree, container);

样式优化（可选） #

可以根据需求调整基础样式，让树形视图更贴合预期：

#tree-container ul {
  margin: 0;
  padding-left: 20px;
}

#tree-container li {
  margin: 4px 0;
}

#tree-container span:first-child {
  color: #666;
}

这个方案完全基于动态数据生成，无需硬编码节点，占用屏幕空间小且支持折叠展开，符合你要的简易树形视图需求。

内容的提问来源于stack exchange，提问作者Sulfy