前端横向组织架构图js_前端组织架构图,js组织结构图资源-CSDN文库

共6个文件

js：2个

png：2个

html：1个

需积分: 44 113 浏览量 2018-12-25 17:51:38 上传评论 1 收藏 34KB RAR 举报

在前端开发中，组织架构图是一种常见的数据可视化方式，它用于清晰地展示组织结构、部门关系或者项目团队的层次结构。本示例关注的是“横向组织架构图”，这种类型的架构图通常以水平的方式展示节点，使得层级关系一目了然。在JavaScript（JS）和jQuery的帮助下，我们可以创建动态的、交互式的组织架构图，支持用户操作如新增、删除、级联删除和修改节点。以下是对这些知识点的详细解释： 1. **JavaScript基础**：JavaScript是网页开发中的主要脚本语言，它负责网页的动态行为。在这个案例中，JS将用于处理用户的交互事件，如点击按钮、拖动节点等，并根据用户的操作更新组织架构图。 2. **jQuery库**：jQuery是一个轻量级的JavaScript库，简化了DOM操作、事件处理、动画设计和Ajax交互。在构建组织架构图时，jQuery可以帮助我们更高效地选择DOM元素、绑定事件和执行动画。 3. **组织架构图的实现**： - 数据结构：我们需要定义一个数据结构来表示组织架构，通常可以使用JSON对象，其中包含节点ID、父节点ID、节点名称等信息。 - DOM渲染：使用JS或jQuery，遍历数据结构并创建对应的DOM元素，如div或span，以图形化表示每个节点及其层级关系。 - 布局算法：实现横向布局，可以使用递归函数遍历树结构，根据父子关系计算每个节点的X坐标，保持Y坐标不变，达到水平排列的效果。 - 功能添加：为每个节点添加事件监听器，实现新增、删除、修改功能。级联删除通常涉及遍历子节点并删除它们，同时更新数据结构。 4. **新增节点**：当用户想要添加新的组织单元时，可以通过输入框输入新节点的信息，然后在图中找到合适的插入位置，创建新的DOM元素，并更新数据结构。 5. **删除节点**：删除操作需要考虑到父节点和子节点的关系。如果选中一个节点并删除，其所有子节点也应该一同被移除。这个过程涉及到对数据结构的深度遍历。 6. **级联删除**：级联删除是指当删除一个节点时，其所有后代节点都将被删除。这个功能需要递归地从被删除节点的子树开始，逐个移除DOM元素并更新数据结构。 7. **修改节点**：允许用户修改节点的属性，如名称或位置。这可能需要捕获特定的用户事件，如编辑框的change事件，然后更新对应的数据结构和DOM元素。 8. **交互与动画**：为了提高用户体验，可以添加一些视觉反馈，如拖放节点以调整结构，或者在进行增删改操作时显示动画效果。通过以上步骤，我们可以创建一个功能完备的前端横向组织架构图。这个过程中，JavaScript和jQuery起到了关键作用，它们提供了必要的工具和方法，帮助我们实现动态的、交互式的组织架构图。在实际开发中，还可以考虑使用现有的图表库，如D3.js或ECharts，这些库提供了丰富的图表类型和高度定制的选项，能够进一步提升开发效率和图形质量。

资源推荐

资源详情

资源评论

收起资源包目录

横向组织架构图.rar （6个子文件）

横向组织架构图

images

add.png 2KB

delete.png 2KB

org.js 3KB

jquery-3.2.1.min.js 85KB

css

org.css 2KB

index.html 1KB

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="utf-8"/> <title>横向组织架构图</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="keywords" content="HTML,ASP,PHP,SQL"><meta name="keywords" content="HTML,ASP,PHP,SQL"> <link rel="stylesheet" href="./css/org.css"/> <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="./js/org.js"></script> </head> <body> <div><p>本案例来源于 https://gitee.com/atcrab/crab 作者:青苗</p></div> <div id="orgChart"></div> <script> var data = [{"id":"0","pid":"0","name":"","initial":"bmd"}]; loadOrg(data); function loadOrg(data) { var orgChart = $('#orgChart').orgChart({ data: data, showControls: true, allowEdit: true, newNodeText: '添加子部门', onAddNode: function (node) { //log('Created new node on node ' + node.data.id); //org.addNode({id: 2, name: '111', pid: 1}); orgChart.newNode(node.data.id); }, onDeleteNode: function (node) { console.log('Deleted node ' + node.data.id); if (node.data.id == 0) { console.log(1) } else { orgChart.deleteNode(node.data.id); } }, onClickNode: function (node) { console.log('--sd---', node.data) console.log('---data---', orgChart.getData()); } }); } </script> </body> </html>

评论收藏

内容反馈