寻求PHP Laravel+JQuery实现自定义布局组织结构图的参考方案

一、纯jQuery+CSS轻量实现（无第三方重型库依赖） #

如果你的组织结构层级不算复杂，这种方案足够灵活且无额外依赖，完全适配你的技术栈：

后端（Laravel）数据处理 #

1. 先定义Organization模型，字段可包含id, name, position, parent_id（父级ID，顶级节点设为0）
2. 编写接口返回树形结构数据，利用Laravel集合简化递归处理：

// 控制器方法示例
public function getOrgData()
{
    $orgItems = \App\Models\Organization::all();
    // 生成树形结构
    $treeData = $orgItems->where('parent_id', 0)->map(function ($item) use ($orgItems) {
        $item->children = $orgItems->where('parent_id', $item->id)->values();
        return $item;
    });
    return response()->json($treeData);
}

前端（jQuery+CSS）渲染 #

1. 编写基础样式实现节点与层级连线：

.org-container {
    padding: 30px;
    overflow-x: auto;
}
.org-level {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
    position: relative;
}
.org-level:not(:first-child)::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    background: #888;
}
.org-node {
    border: 1px solid #666;
    border-radius: 4px;
    padding: 12px 18px;
    margin: 0 15px;
    background: #fff;
    min-width: 160px;
    text-align: center;
    cursor: pointer;
}
.org-node .position {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}
.org-children {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

2. 用jQuery递归渲染DOM结构：

$(document).ready(function() {
    $.get('/api/org-data', function(data) {
        renderOrgTree('.org-container', data);
    });
});

function renderOrgTree(container, nodes) {
    const $level = $('<div class="org-level"></div>');
    
    nodes.forEach(node => {
        const $node = $(`
            <div class="org-node" data-id="${node.id}">
                <div>${node.name}</div>
                <div class="position">${node.position}</div>
            </div>
        `);
        $level.append($node);
        
        if (node.children && node.children.length > 0) {
            const $childrenWrap = $('<div class="org-children"></div>');
            renderOrgTree($childrenWrap, node.children);
            $node.append($childrenWrap);
        }
    });
    
    $(container).append($level);
}

二、轻量jQuery插件增强方案 #

如果需要展开/折叠、节点拖拽等基础交互，可以用简化版的jqOrgChart（直接把核心代码复制到项目中，无需外链）：

前端核心实现 #

1. 引入插件精简后的CSS和JS（可自行裁剪冗余功能）
2. 初始化代码：

$(document).ready(function() {
    $.get('/api/org-data', function(data) {
        $('#org-chart').orgChart({
            data: data,
            showExpandCollapse: true,
            editable: false
        });
    });
});

插件的核心渲染逻辑可参考轻量开源实现，只保留你需要的功能，避免重型库的冗余。

三、关键注意事项 #

• 确保后端返回标准树形结构，Laravel Eloquent可通过定义parent()和children()关联，直接调用toTree()方法生成树形数据
• 若层级过深，需给容器添加overflow-x: auto避免页面溢出
• 如需点击节点展示详情，可绑定jQuery点击事件：

$(document).on('click', '.org-node', function() {
    const nodeId = $(this).data('id');
    $.get(`/api/org/detail/${nodeId}`, function(detail) {
        // 用模态框展示详情
        $('#detail-modal .modal-content').html(`
            <h5>${detail.name}</h5>
            <p>职位：${detail.position}</p>
            <p>部门：${detail.department}</p>
        `);
        $('#detail-modal').modal('show');
    });
});

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