精华内容
下载资源
问答
  • Js组织架构

    2018-05-25 16:46:46
    使用go.js创建组织架构图,里面有做好的demo,有兴趣的可以看看
  • 横向组织架构图前端JS实现代码, 实现新增, 删除, 级联删除, 修改节点 带案例
  • 这是一款基于organization Chart二次封装切优化了样式的一款前端组织架构图控件,样式兼容IE,IE8,GOOGLE等各种浏览器。
  • js组织架构

    2021-06-29 20:32:29
    提速: ...js,css 资源预加载 requestIdleCallback 打包加载 锁定范围 external 公共加载依赖 css3 varble js沙箱 react17 的多react实力 闭包 css隔离 styled component 按需加载 cdn url scope version

    提速:

    秒开

    iconfont预加载
    js,css 资源预加载
    requestIdleCallback

    打包加载

    锁定范围
    external

    公共加载依赖

    css3 varble

    js沙箱

    react17 的多react实力
    闭包

    css隔离

    styled component

    按需加载

    cdn url
    scope
    version

    展开全文
  • js组织架构

    千次阅读 2016-11-29 14:23:03
    用jquery和html实现的组织架构


    <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>


    展开全文
  • 主要介绍了Vue.js递归组件实现组织架构树和选人功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 使用gojs实现组织架构图,横向竖向都可以实现。
  • 组织架构树 纯JS实现

    2013-06-20 13:27:30
    组织架构树 纯JS实现 竖向结构展示 附带2个demo案例 可读性高
  • html js实现的组织架构图,可拖动

    热门讨论 2013-07-18 15:02:52
    倒树结构图 <span class="line-h line-h-l"></span> <div class="line-v"><span></span></div> 电脑品牌 <div class="line-v"><span></span></div> <span class="line-h line-h-r"></...
  • 组织架构JS源码

    2014-10-22 09:17:00
    组织架构图 人员汇报关系图 JS getorgchart 丰富的组织架构层次展示效果。
  • JavaScript高级编程,闭包,Tree 设置
  • 完成的demo,可以根据自己的需要修改,比较全的功能
  • 基于echart.js实现的人员架构图,企业内部组织结构图展示图
  • 大家好!先上图看看本次案例的整体效果。 **浪奔,浪流,万里涛涛江水永不休。如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不能...
  • 一款基于EXTJS的组织架构图,非常值得看看
  • VUE展示组织架构的树组件,兼容IOS9,老版本浏览器也可以正常显示,效果可以自己调整
  • uni-app利用renderjs-echarts-demo构造组织架构图​​ ​​​​​​​​​​​​​​
  • https://blog.csdn.net/q290108231/article/details/85986632 超简单,几行代码就可以轻松搞定
  • JS中常用的几种组织架构图的优点

    千次阅读 2019-03-12 11:51:56
    jOrgChart https://github.com/wesnolte/jOrgChart 给定一个嵌套无序列表元素,容易使用。 其中的拖放功能允许重新排序树和底层的&lt;ul&gt;结构。... 子树折叠,对于大型组织架...

    jOrgChart 

    https://github.com/wesnolte/jOrgChart 

    1. 给定一个嵌套无序列表元素,容易使用。
    2. 其中的拖放功能允许重新排序树和底层的<ul>结构。
    3. 通过点击相应的节点来显示/隐藏树的特定分支。
    4. 节点可以包含除<li>和<ul>之外的任何数量的HTML。
    5. 风格简单。
    6. 子树折叠,对于大型组织架构有用。

    OrgChart 

    https://github.com/dabeng/OrgChart 

    1. 支持本地数据和远程数据(JSON)。
    2. 基于CSS3过渡的平滑展开/折叠效果。
    3. 将图表对齐到4个方向。
    4. 允许用户通过拖放节点更改组织结构。
    5. 允许用户动态编辑组织图并将最终层次结构保存为JSON对象。
    6. 支持将图表导出为图片。
    7. 支持平移和缩放。
    8. 用户可以采用多种解决方案构建庞大的组织图(请参考多层或混合布局部分)。
    9. 触摸启用插件的移动divice。

    jquery-orgchart 

    https://github.com/caprica/jquery-orgchart 

    1. HTML标记,包括可点击的超链接;
    2. 源列表中的所有属性都会被编入相应的图表节点(例如,您可以使用自己的“数据”属性注释节点);
    3. 可选地向每个图表节点添加“附件”节点(例如,用于“助手到类型”关系);
    4. 用于将图表限制为所需级别数量,并在单个堆栈中显示剩余级别的选项;
    5. 从源列表(默认都启用)复制CSS样式,类,HTML数据属性和标题属性(对工具提示或外部工具提示插件有用)的选项;
    6. 可选的回调来处理点击的图表节点;
    7. 通过覆盖少量的CSS样式规则,容易改变图表的外观;

    GetOrgChart 

    http://www.getorgchart.com/ 

    1. 允许开发人员创建复杂的树结构。
    2. 与服务器端组件一起使用时,开发人员还可以使用特制界面和编辑图表。
    3. 默认情况下,GetOrgChart包含各种皮肤和调色板,但开发人员也可以创建主题。
    4. 如果GetOrgChart图表变得过大,内置的搜索字段允许用户搜索项目。
    5. 如果GetOrgChart图表变得过大,用户可以使用表格模式查看原始数据,而不需要视觉层次结构。

    D3.js 

    https://d3js.org/  

    1. D3允许您将任意数据绑定到文档对象模型(DOM)。
    2. 提供了非凡的灵活性。
    3. D3运算速率极快,支持大量数据和动态行为进行交互的动画。
    4. 类似绘制svg的jQuery。
    展开全文
  • 首先用js控制生成了一个组织结构图 再设置这个组织结构可以任意拖动到指定位置 页面代码如下 具体代码 实例 可以去我资源空间下载 代码如下: <...部门组织架构图</title> <meta http-equiv=”Content-Type”
  • D3.js绘制竖向组织架构

    万次阅读 2018-07-25 17:39:04
    d3新手上路,记个笔记(*^_^*) 先上效果图: 主要参考:https://bl.ocks.org/mbostock/3184089 https://github.com/justincy/d3-pedigree-examples d3版本为3.x 主要代码如下: const width = 1200;... ...

    d3新手上路,记个笔记(*^_^*)

    先上效果图:

    主要参考:https://bl.ocks.org/mbostock/3184089 

    https://github.com/justincy/d3-pedigree-examples

    d3版本为3.x

    主要代码如下:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <style>
        body { text-align: center; } svg { margin-top: 32px; border: 1px solid #aaa; } .link { fill: none; stroke: #ccc; stroke-width: 1.5px; } .person rect { fill: #fff; stroke: steelblue; stroke-width: 1px; } .person { font: 14px sans-serif; cursor: pointer; }
      </style>
      <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    </head>
    <body>
      <div id="pedigreehoriz"></div>
      <script>
        const data = {
          name: '中国',
          id: '06ada7cd-3078-54bc-bb87-72e9d6f38abf',
          _parents: [ { name: '北京', id: 'a39bfa73-6617-5e8e-9470-d26b68787e52', _parents: [ { name: '一环', id: 'fc956046-a5c3-502f-b853-d669804d428f' }, { name: '二环', id: 'fa5b0c07-9000-5475-a90e-b76af7693a57' }, { name: '三环', id: '667d2bb6-c26e-5881-9bdc-7ac9805f96c2' }, { name: '四环', id: '104039bb-d353-54a9-a4f2-09fda08b58bb' }, { name: '五环', id: '06c7b0cb-cd21-53be-81bd-9b088af96904' } ] },
            { name: '上海', id: '522266d2-f01a-5ec0-9977-622e4cb054c0', _parents: [ { name: '内环(内)', id: 'da430aa2-f438-51ed-ae47-2d9f76f8d831' }, { name: '中环', id: 'd384197e-2e1e-5fb2-987b-d90a5cdc3c15' }, { name: '外环', id: 'ea01728f-e542-53a6-acd0-6f43805c31a3' }, { name: '外一环', id: '4f910be4-b827-50be-b783-6ba3249f6ebc' }, { name: '外二环', id: 'bfd1612c-b90d-5975-824c-49ecf62b3d5f' } ] }
          ]
        }
        const width = 1200
        const height = 500
        const boxWidth = 120,
          boxHeight = 40
        // Setup zoom and pan
        let zoom = d3.behavior
          .zoom()
          .scaleExtent([0.1, 1])
          .on('zoom', function () {
            svg.attr( 'transform', 'translate(' + d3.event.translate + ') scale(' + d3.event.scale + ')' )
          })
    
        let svg = d3
          .select('#pedigreehoriz')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
          .call(zoom)
          .append('g')
          .attr('transform', 'translate(0)')
    
        // Compute the layout.
        let tree = d3.layout
          .tree()
          .size([width - 500, height - 220])
          .separation(function () {
            return 0.5
          })
          .children(function (person) {
            if (person.collapsed) {
              return
            } else {
              return person._parents
            }
          }),
          nodes = tree.nodes(data),
          links = tree.links(nodes)
    
        // Update nodes
        var node = svg
          .selectAll('g.person')
          // The function we are passing provides d3 with an id
          // so that it can track when data is being added and removed.
          // This is not necessary if the tree will only be drawn once
          // as in the basic example.
          .data(nodes, function (person) {
            return person.id
          })
    
        // Add any new nodes
        var nodeEnter = node
          .enter()
          .append('g')
          .attr('class', 'person')
        // .on('click', togglePerson);
    
        // Draw the rectangle person boxes
        nodeEnter
          .append('rect')
          .attr('y', 0)
          .attr('x', function (d) {
            return d.depth !== 2 ? -(boxWidth / 2) : -(boxHeight / 2)
          })
          .attr('width', function (d) {
            return d.depth !== 2 ? boxWidth : boxHeight
          })
          .attr('height', function (d) {
            return d.depth !== 2 ? boxHeight : boxWidth
          })
          .on('click', function (evt) {
            console.log(evt)
          })
    
        // Draw the person's name and position it inside the box
        nodeEnter
          .append('text')
          .attr('y', function (d) {
            return d.depth !== 2 ? boxHeight / 2 + 5 : 0
          })
          .attr('rotate', function (d) {
            //显示竖直显示中文时rotate为0,英文-90
            return 0
          })
          .attr('style', function (d) {
            return d.depth !== 2 ? '' : 'writing-mode: tb;letter-spacing:0px'
          })
          .attr('text-anchor', function (d) {
            return d.depth !== 2 ? 'middle' : 'start'
          })
          .text(function (d) {
            return d.name
          })
    
        // Update the position of both old and new nodes
        node.attr('transform', function (d) {
          return 'translate(' + d.x + ',' + d.y + ')'
        })
    
        // Remove nodes we aren't showing anymore
        node.exit().remove()
    
        // Update links
        var link = svg
          .selectAll('path.link')
          // The function we are passing provides d3 with an id
          // so that it can track when data is being added and removed.
          // This is not necessary if the tree will only be drawn once
          // as in the basic example.
          .data(links, function (d) {
            return d.target.id
          })
    
        // Add new links
        link
          .enter()
          .append('path')
          .attr('class', 'link')
        // Remove any links we don't need anymore
        // if part of the tree was collapsed
        link.exit().remove()
    
        // Update the links positions (old and new)
        link.attr('d', elbow)
    
        function elbow(d) {
          let sourceX = d.source.x,
            sourceY = d.source.y + boxHeight,
            targetX = d.target.x,
            targetY = d.target.y
    
          return ( 'M' + sourceX + ',' + sourceY + 'V' + ((targetY - sourceY) / 2 + sourceY) + 'H' + targetX + 'V' + targetY )
        }
      </script>
    </body>
    </html>

    主要遇到的问题:

    树的横向纵向:

    这里的x、y和官方例子的树是反的,找到这个不同。。都是泪

    树节点的连接线:http://www.w3school.com.cn/svg/svg_path.asp

    还有就是字母大小写也有绝对和相对定位的区别,这也踩坑了。。

    展开全文
  • 组织架构

    千次阅读 2020-03-19 17:55:54
    js写一个这样的组织架构图,下面是代码 1.插件官网https://balkangraph.com/(官网上说有收费版,但是下载的是免费版的) 可以下载js文件,也可以用npm安装 cnpm i @balkangraph/orgchart.js 2.修改成自己想...
  • 组织架构流程图插件myflow.js是一款支持分支节点状态工作流程图表样式代码。
  • JS组织结构图大整合

    2013-08-09 10:21:09
    包含现CSDN上所有的JS组织结构图 以及大部分网上的JS组织结构图
  • html+js组织架构图(动态生成)

    千次阅读 2013-10-25 00:08:00
    js代码: function offset(node){ var x = node.offsetLeft; var y = node.offsetTop; var w = node.offsetWidth; var h = node.offsetHeight; var parent = node.offsetParent; while (parent != null){ ...
  • jsplumb组织架构布局代码是一款基于jQuery+Jsplumb实现的流程图,可以在js中更改自己想要的效果。
  • JS横向树(组织结构)

    热门讨论 2012-03-22 16:46:39
    js版的横向树脚本,可用于开发企业组织架构图。
  • 预期效果: 开发: 插件:jOrgChart 扩展:jOrgChart-tree 下载: 实操: html <link rel="stylesheet" href="asset/jquery.jOrgChart.css"> <style> a { text-decoration: none; ...
  • js实现的组织结构图

    热门讨论 2009-03-04 08:54:51
    js动态实现的组织架构图型显示,可是参考了以前好多的例子才弄出来。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,691
精华内容 20,676
关键字:

js组织架构