js组织架构图

最新推荐文章于 2024-05-26 09:57:59 发布
最新推荐文章于 2024-05-26 09:57:59 发布
阅读量4.5k 收藏 14
点赞数
分类专栏： html js 文章标签： html javascript 组织架构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhh123sy001/article/details/53392171
版权
js 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
html
4 篇文章 0 订阅
订阅专栏 


<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
* {
	font-size: 12px;
}

.chartDiv {
	width: 900px;
}

.item {
	width: 90px;
	height: 52px;
	margin: 0 auto;
	cursor: pointer;
}

.itemTop {
	height: 26px;
	line-height: 26px;
	background: #f06666;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	text-align: center;
	color: #fff;
}

.itemBot {
	height: 26px;
	line-height: 26px;
	background: #d9d8d8;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	text-align: center;
}

.org2 .itemTop {
	background: #347dea;
}

.org3 .itemTop {
	background: #8ad57d;
}

.org4 .itemTop {
	background: #9b75f8;
}

.itemGroup .item {
	float: left;
	margin-left: 75px;
}

.itemGroup2 .item {
	margin-left: 32px;
}

.itemGroup {
	margin-top: 40px;
	position: relative;
}

.itemGroupFloat {
	float: left;
	margin-top: -52px;
}

.clear {
	clear: both;
}

.linex {
	position: absolute;
	height: 1px;
	background: #6a9bf2;
	top: -20px;
}
.liney {
    width: 1px;
    height: 20px;
    background: #6a9bf2;
    margin: 0 auto;
    margin-top: -20px;
}
.liney0{
	margin-top: 0px;
}
.liney2 {
    height: 40px;
    margin-top: -40px;
}
.liney3 {
    height: 110px;
    margin-top: -110px;
}
.liney4 {
    height: 40px;
    margin-top: -40px;
}
.liney5 {
    height: 224px;
    margin-top: -224px;
}
.borderDiv {
    border: 2px dashed #002bff;
    border-radius: 8px;
    width: 90px;
    height: 52px;
    position: absolute;
    display: none;
    z-index: -1;
}
</style>
</head>
<body>
	<div class="mainDiv">
		<div class="chartDiv">
			<div class="item">
				<div class="itemTop">集团总部</div>
				<div class="itemBot">总裁</div>
			</div>
			<div class="itemGroup">
				<div class="item">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item">
					<div class="liney liney2"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="clear"></div>
				<div class="linex"></div>
			</div>
			<div class="itemGroup">
				<div class="item org2" style="margin-left: 155px;">
					<div class="liney liney3"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org3" style="margin-left: 410px;">
					<div class="liney liney3"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="itemGroup itemGroup2">
				<div class="item org2">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org2">
					<div class="liney liney2"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org2">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="clear"></div>
				<div class="linex"></div>
			</div>
			<div class="itemGroup itemGroup2 itemGroupFloat"
				style="margin-left: 364px;">
				<div class="item org3" style="margin-left: 168px;">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org3">
					<div class="liney liney2"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org3">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="clear"></div>
				<div class="linex"></div>
			</div>
			<div class="itemGroup itemGroup2">
				<div class="item org2">
					<div class="liney liney4"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org4" style="margin-left: 90px;">
					<div class="liney liney3"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
					<div class="liney liney0"></div>
				</div>
				<div class="item" style="margin-left: 102px;">
					<div class="liney liney5"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org3" style="margin-left: 162px;">
					<div class="liney liney4"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="itemGroup itemGroup2">
				<div class="item org4" style="margin-left: 154px;">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org4" style="/* margin-left: 90px; */">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="clear"></div>
				<div class="linex"></div>
			</div>
			<div class="borderDiv"></div>
		</div>
	</div>

	<script type="text/javascript">
		jQuery(function() {
			//定位横向的线
			jQuery(".linex").each(function() {
				var obj = jQuery(this).parent();
				var left = obj.find(".item:first").offset().left + 45;
				var width = obj.find(".item:last").offset().left + 45 - left;
				if (obj.hasClass("itemGroupFloat")) {
					left = left - obj.offset().left;
				}
				jQuery(this).css({
					"margin-left" : left + "px",
					"width" : width + "px"
				});
			});
			
			//初始化选择后的框
			jQuery(".item").click(function(event){
				var obj = jQuery(this).offset();
				var l = obj.left - 2;
				var t = obj.top - 2;
				jQuery(".borderDiv").css({"left":l+"px","top":t+"px"}).show();
				event.stopPropagation();
				return false;
			});
			
			jQuery(".chartDiv").click(function(){
				jQuery(".borderDiv").hide();
			});
		});
	</script>
</body>
</html>


_平凡的自我_
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【javascript】纯原生js的轻便组织结构图，树状图，支持自定义样式
hello world_
09-15 3908
前言 写这个插件呢，只是一时兴起，公司的项目中使用到了组织结构图，然后本着面向百度、谷歌编程的思想，我去摸索了半天。 结果一无所获，可能这个词用的有点重了，但是就是没有符合我公司项目要求的，然后我又去了全球最大的同性社交网站（github）还是没有找到自己满意的插件。 但是整个过程借鉴下来也有了自己的一些小思路，干脆自己封装一个得了（本文的插件非常简单，大佬勿喷） 思路 思路呢，大概是这样的，先定数据结构，因为有了结构才好拿着去定 dom 的结构。 因为是结构图嘛，所以父子关系肯定是跑不掉了，那
d3.js实现组织架构图
皮卡丘
12-29 898
1、效果 2、安装依赖 npm install d3 --save-dev 3、粘贴代码 <template> <div id="appc" style="height: 650px"></div> </template> <script> import * as $d3 from "d3"; export default { name: "legalperson", data() { return { d3:
使用vue-orgchart库来创建组织架构图
terence的博客
06-05 1087
在这篇博客中，将详细介绍如何构建一个使用Vue.js和vue-orgchart的组织架构图Demo。Vue.js是一种构建用户界面的JavaScript框架，而vue-orgchart是一个基于Vue的组织结构图组件。本Demo将展示如何使用这两种技术来创建一个展示组织架构的可视化工具。
orgChart.js组织架构图
我不晓得
10-13 917
获取orgchart的层次结构关系,例如，在编辑组织结构图之后，您可以将此方法的返回值发送到服务器端并保存orghcart的新状态。以编程方式隐藏任何特定节点（.node元素）的兄弟节点。以编程方式显示任何特定节点（.node元素）的兄弟节点。以编程方式隐藏任何特定节点（.node元素）的子节点。以编程方式显示任何特定节点（.node元素）的子节点。-data:json对象，用于构建根节点的数据源。-node:dome节点，基于此节点添加兄弟节点。-node:dome节点，基于此节点添加子节点。
开源项目推荐：Jquery-orgchart - 灵活易用的组织架构图插件
最新发布
gitblog_00037的博客
05-26 406
开源项目推荐：Jquery-orgchart - 灵活易用的组织架构图插件 项目地址:https://gitcode.com/caprica/jquery-orgchart 1、项目介绍 Jquery-orgchart 是一个基于 jQuery 的轻量级插件，用于从嵌套无序列表快速构建互动式组织架构图。虽然它已由 react-org-chart 替代，但 Jquery-orgchart 仍是一个可...
Js组织架构图
05-25
使用go.js创建组织架构图，里面有做好的demo，有兴趣的可以看看
js实现组织结构图
热门推荐
杏子
02-15 1万+
一、前言 这种组织结构图是不是很熟悉？一般是以画图的形式或者word形式展现，下面给大家介绍一下如何用原生 JS 实现，以便于可以显示在网页上。 二、整理思路（实现步骤） 1. 要想实现这种复杂的组织结构图，首先需要整理具有逻辑性的数据结构，如下所示： var depArr = [ {departmentname: 'CEO', subcompanyid1: '2', su...
orgchart.js组织结构图,优雅的方式呈现结构数据
q2315702359的博客
02-13 2018
orgchart.js组织结构图,优雅的方式呈现结构数据 　　orgchart.js组织结构图创建简单、灵活且高度可定制的组织结构图，以优雅的方式呈现结构数据。 　　orgchart.js组织结构图????231570239是经理用来帮助说明角色和组织层次结构的可视化工具。无论您是企业、非营利组织还是政府组织，图表都可以帮助您的员工了解指挥链，并清楚地说明哪些人向哪个经理汇报。通过准确的图表，您将能够制定增长战略并分配新项目。清晰的组织结构图可以帮助您映射工作场所的低效率。 　　OrgChar
前端横向组织架构图 js
12-25
在JavaScript（JS）和jQuery的帮助下，我们可以创建动态的、交互式的组织架构图，支持用户操作如新增、删除、级联删除和修改节点。以下是对这些知识点的详细解释： 1. **JavaScript基础**：JavaScript是网页开发中...
orgchart.js 组织架构图之JQuery插件
09-19
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织...组织架构图之JQuery插件orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js ...
highchart组织架构图.zip
07-28
例如，可能需要编写JS代码来加载数据，创建Highcharts对象，设置组织架构图的节点和连接线等。 5. **使用Highcharts创建组织架构图**： 创建Highcharts组织架构图需要以下几个步骤： - 引入Highcharts库：在HTML...
多个经典的js版的组织结构图
09-10
多个经典的js版的组织结构图多个经典的js版的组织结构图多个经典的js版的组织结构图多个经典的js版的组织结构图
D3.js关系图表&组织结构图表
05-02
支持节点拖拽 支持节点拖拽并固定位置 支持鼠标浮到节点显示节点信息 支持鼠标浮到节点隐藏不相关的节点及线 支持画布整体缩放移动 支持双击节点隐藏不相关的节点及线 可以累加双击的节点 支持双击画布空白处还原显示所有节点信息
组织架构图实现-jOrgChart的使用
03-29
在IT领域，组织架构图是一种重要的数据可视化工具，它用于展示公司、团队或者项目中的人员关系和层次结构。本文将详细介绍如何使用jOrgChart库来实现动态、交互式的组织架构图。 jOrgChart是一个基于jQuery的插件，...
组织结构图 js实现
a1396910249的专栏
12-31 1万+
最近公司需要将原来项目里 机构的树状展示图形添加一个 组织结构图的展示。 在网上找了找代码，感觉这个 http://blog.sina.com.cn/s/blog_6d0c777b01013mwj.html   挺简单，简单的修改运行了起来，测试的时候发现存在bug。主要是它的算法在只有最下层的节点全部连续时，才能生成正确的结构图。也就是说，如果需要生成的结构图的最下层节点不连续，那么用该算
html5 js 组织机构图,基于d3.js的组织结构图实现
weixin_35695142的博客
07-02 1091
一、效果图：二、数据结构data.json:{“name”:”中国”,“number”:”2000”,“children”:[{“name”:”浙江” ,“number”:”100”,“children”:[{“name”:”杭州” ,“number”:”100”},{“name”:”宁波” ,“number”:”200”},{“name”:”温州” ,“number”:”300”},{“name...
组织架构图
littlebearGreat——宁静致远
03-19 2801
js写一个这样的组织架构图，下面是代码 1.插件官网https://balkangraph.com/（官网上说有收费版，但是下载的是免费版的） 可以下载js文件，也可以用npm安装 cnpm i @balkangraph/orgchart.js 2.修改成自己想要的样式（因为没太多时间，只简单的改成了自己要做的样子，也没有好好处理代码，该文件可直接复制使用，setTemp是修改模板...
D3.js + Canvas 绘制组织结构图
weixin_33898233的博客
06-01 1599
使用 D3.js 默认的 svg 渲染 D3默认的树状图画图使用的是svg, 比如这个来自D3作者的例子: https://bl.ocks.org/mbostock/4339083 使用svg有好有坏: 好处是方便操作dom元素, 添加用户交互 坏处是渲染效率不高, 在数据量较大时页面易掉帧, 卡顿 在大多数数据量不是特别大情况下, 使用svg的好处是远远盖过坏处的,但如果我们真的需要渲染大量...
js 流程图插件_创建组织架构图的5个JS库
weixin_39525355的博客
12-03 2798
导读：在本文中，我们找来了五个创建在线组织结构图的JavaScript库。为了帮助一些读者在开发CRM相关系统时做为参考之用。本文考量的关键点为功能和文档以及用户体验。DHTMLX地址：https://dhtmlx.com/docs/products/dhtmlxDiagram/DHTMLX库创建的图表，可以对数据进行分层、可视化并且配置容易。从2.0版开始，除了组织结构图之外，开发者还...
d3.js组织架构图
05-09
d3.js是一个非常流行的JavaScript库，用于创建数据可视化。它提供了各种各样的可视化工具和模板，其中之一就是组织架构图。 d3.js组织架构图可以用于展示组织结构、团队架构等数据。它通常是一个树形结构，其中每个节点都代表一个员工或者一个部门，并且它们的层级关系也可以清晰地展示出来。 要创建一个d3.js组织架构图，你需要准备好你的数据并确定节点的层级关系。然后使用d3.js提供的树形布局函数，将数据转换为一个树形结构。最后，你可以使用d3.js提供的可视化工具创建组织架构图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值