使用 HTML + JavaScript 实现组织架构图

文章目录一、组织架构图二、效果演示三、系统分析1.页面结构1.1 操作区域1.2 组织结构图区域2 核心功能实现2.1 数据结构定义2.2 节点渲染逻辑2.3节点展开/收起功能2.4 全部展开/收起四、扩展建议五、完整代码一、组织架构图在企业管理系统或团队协作平台中组织结构图是一种重要的可视化工具能够清晰地展示公司的层级关系和人员分布。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 从零开始构建一个具有交互功能的组织结构图。二、效果演示本项目呈现了一个典型的公司组织架构从上级开始逐层向下展示各个部门及员工职位。用户可以通过点击节点上的 /- 按钮来展开或收起子节点也可以通过顶部的“展开/收起全部”按钮一键控制所有节点的状态。默认情况下部分节点被设置为收起状态以避免图表过于庞大用户可以根据需要自由展开查看详细信息。三、系统分析1.页面结构系统主要包括以下几个功能区域1.1 操作区域该区域位于主内容上方提供全局操作按钮目前只有一个“展开/收起全部”的功能按钮用户可以一键控制所有节点的展开状态。divclassactionsbuttononclicktoggleAll()展开/收起全部/button/div1.2 组织结构图区域这是实际渲染组织结构图的核心区域使用 #orgChart 作为根节点容器。divclassorg-chart-containerdivclassorg-chartidorgChart/div/div2 核心功能实现2.1 数据结构定义组织结构图的数据源是一个嵌套的 json 数据每个节点包含 id、name、position 和 children 属性。这种树形数据结构非常适合表示层级关系并且易于遍历和渲染。varorgData{id:1,name:张伟,position:CEO,children:[{id:2,name:李娜,position:技术总监,children:[// ... 更多子节点]},// ... 更多同级节点]};2.2 节点渲染逻辑使用递归方式渲染整个组织结构图通过递归遍历数据结构为每个节点创建对应的DOM元素并根据是否有子节点添加相应的CSS类名。functionrenderOrgChart(data,container){// 创建当前节点varnodeEldocument.createElement(div);nodeEl.classNamenode;nodeEl.dataset.iddata.id;// 如果有子节点添加标识类if(data.childrendata.children.length0){nodeEl.classList.add(has-children);}// 设置节点内容nodeEl.innerHTMLdiv classtitle${data.name}/div div classposition${data.position}/div div classtoggle-btn/div;// 为切换按钮添加点击事件if(data.childrendata.children.length0){consttoggleBtnnodeEl.querySelector(.toggle-btn);toggleBtn.addEventListener(click,function(e){e.stopPropagation();nodeEl.classList.toggle(collapsed);});}container.appendChild(nodeEl);// 如果有子节点创建子节点容器if(data.childrendata.children.length0){varchildrenEldocument.createElement(div);childrenEl.classNamechildren;data.children.forEach((child,index){varchildWrapperdocument.createElement(div);childWrapper.classNamechild;// 添加特殊类名用于样式控制if(data.children.length1){childWrapper.classList.add(only-child);}elseif(index0){childWrapper.classList.add(first-child);}elseif(indexdata.children.length-1){childWrapper.classList.add(last-child);}renderOrgChart(child,childWrapper);childrenEl.appendChild(childWrapper);});container.appendChild(childrenEl);}// 默认收起部分节点if(data.id2||data.id4){nodeEl.classList.add(collapsed);}}2.3节点展开/收起功能通过给节点添加/移除 .collapsed 类来控制子节点的显示与隐藏。CSS 中利用相邻兄弟选择器来隐藏被收起节点的子级容器同时通过伪元素 ::after 在节点下方显示 /- 按钮提升用户体验。相关事件在“节点渲染逻辑”中“为切换按钮添加点击事件”绑定2.4 全部展开/收起首先判断当前是否所有节点都处于收起状态然后统一执行相反的操作。functiontoggleAll(){varnodesdocument.querySelectorAll(.node.has-children);varisAllCollapsedArray.from(nodes).every(nodenode.classList.contains(collapsed));nodes.forEach(node{if(isAllCollapsed){node.classList.remove(collapsed);}else{node.classList.add(collapsed);}});}四、扩展建议节点编辑功能支持双击节点进入编辑状态修改人员信息拖拽排序引入拖拽库实现组织架构的可视化调整导出功能支持将组织结构图导出为图片或PDF格式主题定制提供更多颜色方案和样式选项满足不同企业的品牌形象需求五、完整代码git地址https://gitee.com/ironpro/hjdemo/blob/master/orgchart/index.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title组织结构图/titlestyle*{margin:0;padding:0;box-sizing:border-box;}body{background-color:#f5f5f5;min-height:100vh;padding:20px;}.container{max-width:980px;margin:0 auto;background:white;border-radius:15px;box-shadow:0 20px 40pxrgba(0,0,0,0.1);overflow:hidden;}.header{background:#45a049;color:white;padding:20px;text-align:center;}.header h1{font-size:24px;font-weight:500;}.main{padding:20px;}.org-chart-container{display:flex;justify-content:center;overflow:auto;padding:20px 0;}.org-chart{display:flex;flex-direction:column;align-items:center;position:relative;}.node{background-color:white;border:2px solid #4CAF50;border-radius:8px;padding:15px;width:120px;text-align:center;box-shadow:0 2px 5pxrgba(0,0,0,0.1);position:relative;cursor:pointer;transition:all 0.3s ease;display:inline-block;}.node:hover{box-shadow:0 4px 10pxrgba(0,0,0,0.5);}.node .title{font-weight:bold;color:#333;margin-bottom:5px;}.node .position{color:#666;font-size:14px;}.children{display:flex;justify-content:center;margin-top:40px;position:relative;}.children::before{content:;position:absolute;top:-40px;left:50%;width:2px;height:20px;background-color:#4CAF50;}.child{position:relative;padding:0 10px;text-align:center;}.child::before{content:;position:absolute;top:-20px;left:50%;width:2px;height:20px;background-color:#4CAF50;}.child::after{content:;position:absolute;top:-20px;left:0;width:100%;height:2px;background-color:#4CAF50;}.first-child::after{width:50%;left:50%;}.last-child::after{width:50%;}.only-child::after{width:0;}.actions{text-align:center;}button{background-color:#4CAF50;color:white;border:none;padding:10px 15px;border-radius:4px;cursor:pointer;margin:0 5px;font-size:14px;}button:hover{background-color:#45a049;}.node.collapsed .children{display:none;}.node .toggle-btn::after{content:-;position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:20px;height:20px;background-color:#4CAF50;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:16px;z-index:9;cursor:pointer;}.node.collapsed .toggle-btn::after{content:;}.node:not(.has-children) .toggle-btn{display:none;}/style/headbodydivclasscontainerdivclassheaderh1组织结构图/h1/divdivclassmaindivclassactionsbuttononclicktoggleAll()展开/收起全部/button/divdivclassorg-chart-containerdivclassorg-chartidorgChart/div/div/div/divscriptvarorgData{id:1,name:张伟,position:CEO,children:[{id:2,name:李娜,position:技术总监,children:[{id:4,name:王强,position:前端主管,children:[{id:7,name:陈晨,position:前端工程师},{id:8,name:刘芳,position:UI设计师}]},{id:5,name:赵磊,position:后端主管,children:[{id:9,name:孙丽,position:Java工程师},{id:10,name:周鹏,position:数据库专家}]}]},{id:3,name:马华,position:市场总监,children:[{id:6,name:吴敏,position:市场经理,children:[{id:11,name:郑涛,position:市场专员},{id:12,name:黄娟,position:品牌专员}]}]}]};// 渲染组织结构图functionrenderOrgChart(data,container){// 创建当前节点varnodeEldocument.createElement(div);nodeEl.classNamenode;nodeEl.dataset.iddata.id;// 如果有子节点添加标识类if(data.childrendata.children.length0){nodeEl.classList.add(has-children);}// 设置节点内容nodeEl.innerHTMLdiv classtitle${data.name}/div div classposition${data.position}/div div classtoggle-btn/div;// 为切换按钮添加点击事件if(data.childrendata.children.length0){consttoggleBtnnodeEl.querySelector(.toggle-btn);toggleBtn.addEventListener(click,function(e){e.stopPropagation();nodeEl.classList.toggle(collapsed);});}container.appendChild(nodeEl);// 如果有子节点创建子节点容器if(data.childrendata.children.length0){varchildrenEldocument.createElement(div);childrenEl.classNamechildren;data.children.forEach((child,index){varchildWrapperdocument.createElement(div);childWrapper.classNamechild;// 添加特殊类名用于样式控制if(data.children.length1){childWrapper.classList.add(only-child);}elseif(index0){childWrapper.classList.add(first-child);}elseif(indexdata.children.length-1){childWrapper.classList.add(last-child);}renderOrgChart(child,childWrapper);childrenEl.appendChild(childWrapper);});container.appendChild(childrenEl);}// 默认收起部分节点if(data.id2||data.id4){nodeEl.classList.add(collapsed);}}// 初始化组织结构图functioninitOrgChart(){varcontainerdocument.getElementById(orgChart);container.innerHTML;renderOrgChart(orgData,container);}// 展开/收起全部节点functiontoggleAll(){varnodesdocument.querySelectorAll(.node.has-children);varisAllCollapsedArray.from(nodes).every(nodenode.classList.contains(collapsed));nodes.forEach(node{if(isAllCollapsed){node.classList.remove(collapsed);}else{node.classList.add(collapsed);}});}initOrgChart();/script/body/html