基于SQL Server构建适配Angular/Highcharts的员工层级数据结构

方案一：带层级标识的扁平数据集（前端灵活处理） #

这种方案输出扁平结构，但包含足够的层级元数据，前端可以轻松构建可展开的树状/组织结构。

SQL查询示例（SQL Server） #

假设员工表为Employees，核心字段：EmpNTID（唯一ID）、Name、ParentNTID（上级ID，顶级节点为NULL）：

WITH EmployeeHierarchy AS (
    -- 顶级节点初始化
    SELECT 
        EmpNTID,
        Name,
        ParentNTID,
        1 AS LevelDepth,
        CAST(EmpNTID AS VARCHAR(MAX)) AS HierarchyPath
    FROM Employees
    WHERE ParentNTID IS NULL
    UNION ALL
    -- 递归遍历子节点
    SELECT 
        e.EmpNTID,
        e.Name,
        e.ParentNTID,
        eh.LevelDepth + 1,
        eh.HierarchyPath + '|' + CAST(e.EmpNTID AS VARCHAR(MAX))
    FROM Employees e
    INNER JOIN EmployeeHierarchy eh ON e.ParentNTID = eh.EmpNTID
)
SELECT * FROM EmployeeHierarchy
ORDER BY HierarchyPath;

核心字段作用 #

• LevelDepth：标记节点在层级中的深度（顶级为1），前端可用来控制缩进或样式
• HierarchyPath：从顶级到当前节点的ID拼接路径（如A001|A002|A003），用于快速定位层级关系
• ParentNTID：直接上级ID，用于构建父子关联

前端适配 #

• Angular可通过ParentNTID将扁平数据转换为嵌套的树状结构（比如用递归函数处理）
• Highcharts的**组织结构图（Organization Chart）或树图（TreeMap）**可直接适配该数据集，只需配置字段映射，开启allowDrillToNode: true即可实现展开/折叠钻取

方案二：直接输出嵌套JSON结构（减少前端工作量） #

如果数据库支持JSON生成（如SQL Server 2016+、PostgreSQL），可以让SQL直接输出嵌套结构，前端拿到后直接使用。

SQL查询示例（SQL Server） #

WITH EmployeeHierarchy AS (
    SELECT EmpNTID, Name, ParentNTID FROM Employees
)
SELECT 
    eh.EmpNTID,
    eh.Name,
    -- 递归生成子节点JSON
    (SELECT * FROM EmployeeHierarchy child WHERE child.ParentNTID = eh.EmpNTID FOR JSON AUTO, WITHOUT_ARRAY_WRAPPER) AS Children
FROM EmployeeHierarchy eh
WHERE eh.ParentNTID IS NULL
FOR JSON AUTO;

输出示例 #

[
    {
        "EmpNTID": "A001",
        "Name": "张三",
        "Children": {
            "EmpNTID": "A002",
            "Name": "李四",
            "Children": {
                "EmpNTID": "A003",
                "Name": "王五"
            }
        }
    }
]

前端适配 #

• Angular直接解析JSON即可绑定数据
• Highcharts组织结构图可直接传入该嵌套结构，配置series.data为该数组，自动识别children字段实现层级展开

注意事项 #

• 检查数据完整性：避免ParentNTID出现循环引用（如员工上级指向自己），可在SQL中添加判断逻辑
• 递归深度限制：SQL Server默认递归深度为100，层级较深时需添加OPTION (MAXRECURSION 0)取消限制，但要注意性能
• 前端性能：如果数据量极大，建议采用懒加载（点击节点时再请求子节点数据），避免一次性加载全部层级

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