orgchart实现组织结构图

之前项目需要我搞一个组织架构图，用大约一周时间挑选了框架并开发，最后用orgchart搞出来了，先上结果图

orgchart下载地址：https://github.com/dabeng/OrgChart

打开下载的压缩包，如下图

然后可以打开demo目录，里面是例子，我们可以根据例子来修改成我们自己的样式，先来看一下他的基本样式

打开之后我们就可以根据他的例子来进行修改，我的组织结构图的主要代码如下：

<%--Created by IntelliJ IDEA.User: mzDate: 2018/10/18Time: 10:45To change this template use File | Settings | File Templates.
--%><%--------之前有些无关紧要的部分略过----------%><%--3-1，股权结构图的结构图部分--%><div id="chart-container"></div><%--3-2，结构图的脚本部分--%><script type="text/javascript">$(function () {var datascource = {'name': '德玛西亚','rate': '','childnum': '','className': 'motherC','children': [{'name': '子公司', 'childnum': '子公司数：2家', 'rate': '', 'className': 'childC','children': [{'name': '<br>德<br>吗<br>西<br>亚','childnum': '2家','rate': '100%','className': 'leafC','children': [{'name': '<br>德<br>吗<br>西<br>亚','childnum': '0家','rate': '100%','className': 'leafC'},{'name': '<br>德<br>吗<br>西<br>亚', 'childnum': '0家', 'rate': '100%', 'className': 'leafC'}]},{'name': '<br>德<br>吗<br>西<br>亚','childnum': '2家','rate': '100%','className': 'leafC','children': [{'name': '<br>德<br>吗<br>西<br>亚','childnum': '0家','rate': '100%','className': 'leafC'},{'name': '<br>德<br>吗<br>西<br>亚', 'childnum': '0家', 'rate': '100%', 'className': 'leafC'}]}]},{'name': '分公司', 'childnum': '分公司数：0家', 'rate': '', 'className': 'branchC'},{'name': '控股公司', 'childnum': '控股公司数：3家', 'rate': '', 'className': 'joinC','children': [{'name': '<br>李<br>润<br>石<br>风<br>投<br>1','childnum': '0家','rate': '100%','className': 'leafC'},{'name': '<br>李<br>润<br>石<br>风<br>投<br>2','childnum': '0家','rate': '100%','className': 'leafC'},{'name': '<br>李<br>润<br>石<br>风<br>投<br>3','childnum': '0家','rate': '100%','className': 'leafC'}]}]};var nodeTemplate = function (data) {var str = '';str += '<div class="name" style="color: white">'+data.name+'</div>';str += '<div class="rate" style="color: white">'+data.rate+'</div>';str += '<div class="childnum" style="color: white">'+data.childnum+'</div>';return str;<%--return '--%><%--<div class="name" >${data.name}</div> <div class="childnum">${data.childnum}</div><div class="rate">${data.rate}</div>--%><%--';--%>};var oc = $('#chart-container').orgchart({'data': datascource,'nodeTemplate': nodeTemplate,'toggleSiblingsResp': false,'direction': 'T2B',//   visibleLevel【number】：默认展开几级'visibleLevel': 3,parentNodeSymbol: null});});</script></div>

下面是官网给的一些参数，我们可以根据这些参数来修改组织架构图的样式

Name	Type	Required	Default	Description
data	json or string	yes		datasource usded to build out structure of orgchart. It could be a json object or a string containing the URL to which the ajax request is sent.
pan	boolean	no	false	Users could pan the orgchart by mouse drag&drop if they enable this option.
zoom	boolean	no	false	Users could zoomin/zoomout the orgchart by mouse wheel if they enable this option.
zoominLimit	number	no	7	Users are allowed to set a zoom-in limit.
zoomoutLimit	number	no	0.5	Users are allowed to set a zoom-out limit.
direction	string	no	"t2b"	The available values are t2b(implies "top to bottom", it's default value), b2t(implies "bottom to top"), l2r(implies "left to right"), r2l(implies "right to left").
verticalLevel	integer(>=2)	no		Users can make use of this option to align the nodes vertically from the specified level.
toggleSiblingsResp	boolean	no	false	Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow.
ajaxURL	json	no		It inclueds four properites -- parent, children, siblings, families(ask for parent node and siblings nodes). As their names imply, different propety provides the URL to which ajax request for different nodes is sent.
visibleLevel	positive integer	no	999	It indicates the level that at the very beginning orgchart is expanded to.
nodeTitle	string	no	"name"	It sets one property of datasource as text content of title section of orgchart node. In fact, users can create a simple orghcart with only nodeTitle option.
parentNodeSymbol	string	no	"fa-users"	Using font awesome icon to imply that the node has child nodes.
nodeContent	string	no		It sets one property of datasource as text content of content section of orgchart node.
nodeId	string	no	"id"	It sets one property of datasource as unique identifier of every orgchart node.
nodeTemplate	function	no		It's a template generation function used to customize any complex internal structure of node. It recieves only one parameter: "data" stands for json datasoure which will be use to render one node.
createNode	function	no		It's a callback function used to customize every orgchart node. It recieves two parameters: "$node" stands for jquery object of single node div; "data" stands for datasource of single node.
exportButton	boolean	no	false	It enable the export button for orgchart.
exportFilename	string	no	"Orgchart"	It's filename when you export current orgchart as a picture.
exportFileextension	string	no	"png"	Available values are png and pdf.
chartClass	string	no	""	when you wanna instantiate multiple orgcharts on one page, you should add diffent classname to them in order to distinguish them.
draggable	boolean	no	false	Users can drag & drop the nodes of orgchart if they enable this option. Note: this feature doesn't work on IE due to its poor support for HTML5 drag & drop API.
dropCriteria	function	no		Users can construct their own criteria to limit the relationships between dragged node and drop zone. Furtherly, this function accept three arguments(draggedNode, dragZone, dropZone) and just only return boolen values.
initCompleted	function	no		It can often be useful to know when your table has fully been initialised, data loaded and rendered, particularly when using an ajax data source. It recieves one parament: "$chart" stands for jquery object of initialised chart.

我们最主要关注的是下面几个属性：

//传数据的，可以是json或者string
'data' : datascource,
//通过单击左/右箭头分别显示/隐藏左/右兄弟节点，
'toggleSiblingsResp': false,
//控制结构图的方向，String 默认是t2b，T2B："从上到下"，B2T："从底到上"，L2R："左到右"，R2L："向左到右"
'direction':'T2B',
//   visibleLevel：默认展开几级
'visibleLevel':3,// 是否可以通过鼠标拖动组织架构图
// 'pan':true,
// 是否可以通过滚轮放大缩小组织架构图，以及放大缩小的比例
// 'zoom':true,
// 'zoominLimit':7
// 'zoomoutLimit':0.5
// 是否可以拖动和删除OrgChart节点
// 'draggable':true,
// 父节点的左上是否有个图标来说明有子节点parentNodeSymbol:null,
// createNode': function($node, data) 目前没用到，还不清楚用途
// nodeTemplate,目前用到的最重要的一个属性，用来自定义结点

最开始使用orgchart的时候因为他可以四个方向隐藏，所以可能有点迷，而且我的项目基本上只用得到向下隐藏，因此我在js文件中把其他三个方向的隐藏语句都注释掉了，此外我还自定义一些css以修饰组织架构图，使其符合我的要求


/*---------------------------------------------------------------------------------------------------------*/
/*----下面开始是结构图的样式-----------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*//*这个类可以控制结构图的背景*/
.orgchart {background: #CDE6FA;height: 1000px;width: calc(100%);}/*自定义的颜色和结构，用来修饰结构图的整体颜色和大小*//*母公司------------------------------------------------------------------------------------------------------*//*设置根节点的样式*/
.orgchart .motherC{width: 195px;
}.orgchart .motherC .name {background-color: #034273;border-color: #034273;width: 195px;height: 40px;line-height: 40px;font-size: 17px;font-weight: bold;vertical-align: middle;border-radius: 4px;margin:0px auto;
}.orgchart .motherC .childnum, .orgchart .motherC .rate {width: 0px;height: 0px;margin:0px auto;
}/*子公司，控股公司，分公司三个块------------------------------------------------------------------------------*/
/*子公司-------------------------------------*/
.orgchart .childC{width: 195px;
}
.orgchart .childC .name {background-color: #f15a00;border-color: #f15a00;width: 195px;height: 37px;line-height: 37px;font-size: 17px;font-weight: bold;vertical-align: middle;text-align: center; /*水平居中*/line-height: 37px;font-size: 17px;font-weight: bold;vertical-align: middle;text-align: center; /*水平居中*/border-top-left-radius: 4px;border-top-right-radius: 4px;margin:0px auto;
}.orgchart .childC .childnum {background-color: #f15a00;border-color: #f15a00;width: 195px;height: 20px;font-size: 15px;text-align: center; /*水平居中*/border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;margin:0px auto;
}.orgchart .childC .rate {background-color: #f15a00;border-color: #f15a00;width: 0px;height: 0px;margin:0px auto;
}/*分公司--------------------------------------*/
.orgchart .branchC{width: 195px;
}
.orgchart .branchC .name {background-color: #3079bf;border-color: #3079bf;width: 195px;height: 37px;line-height: 37px;font-size: 17px;font-weight: bold;vertical-align: middle;text-align: center; /*水平居中*/line-height: 37px;font-size: 17px;font-weight: bold;vertical-align: middle;text-align: center; /*水平居中*/border-top-left-radius: 4px;border-top-right-radius: 4px;margin:0px auto;
}.orgchart .branchC .childnum {background-color: #3079bf;border-color: #3079bf;width: 195px;height: 20px;font-size: 15px;text-align: center; /*水平居中*/border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;margin:0px auto;
}.orgchart .branchC .rate {background-color: #3079bf;border-color: #3079bf;width: 0px;height: 0px;margin:0px auto;
}/*参股公司-------------------------------------------*/
.orgchart .joinC{width: 195px;
}.orgchart .joinC .name {background-color: #2e77be;border-color: #2e77be;width: 195px;height: 37px;line-height: 37px;font-size: 17px;font-weight: bold;vertical-align: middle;text-align: center; /*水平居中*/line-height: 37px;font-size: 17px;font-weight: bold;vertical-align: middle;text-align: center; /*水平居中*/border-top-left-radius: 4px;border-top-right-radius: 4px;margin:0px auto;
}.orgchart .joinC .childnum {background-color: #2e77be;border-color: #2e77be;width: 195px;height: 20px;font-size: 15px;text-align: center; /*水平居中*/border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;margin:0px auto;
}.orgchart .joinC .rate {background-color: #2e77be;border-color: #2e77be;width: 0px;height: 0px;margin:0px auto;
}/*二级公司的叶子，也就是三级公司-----------------------------------------*/.orgchart .leafC .name {background-color: #004500;border-color: #004500;/*border-bottom-color: white;*/border-top-left-radius: 4px;border-top-right-radius: 4px;width: 41px;height: 137px;font-size: 12px;margin:0px auto;
}.orgchart .leafC .childnum {background-color: #004500;border-color: blue;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;font-size: 12px;/*border-top-color: white;*/width: 41px;height: 25px;margin:0px auto;
}.orgchart .leafC .rate {background-color: #004500;border-color: blue;/*border-top-color: white;*//*border-bottom-color: white;*/font-size: 12px;width: 41px;height: 35px;margin:0px auto;
}/*-其他关于块的配置-------------------------------------------------------------------*/.orgchart .leafC, .orgchart .joinC, .orgchart .motherC, .orgchart .childC, .orgchart .branchC {padding-top: 0px;padding-bottom: 0px;
}/*-线条的配置-目前基本没动-------------------------------------------------------------------------------*/
.orgchart .lines:nth-child(3) td {box-sizing: border-box;height: 20px;
}
.orgchart .lines .topLine {border-top: 2px solid rgba(217, 83, 79, 0.8);
}.orgchart .lines .rightLine {border-right: 1px solid rgba(217, 83, 79, 0.8);float: none;border-radius: 0;
}.orgchart .lines .leftLine {border-left: 1px solid rgba(217, 83, 79, 0.8);float: none;border-radius: 0;
}.orgchart .lines .downLine {background-color: rgba(217, 83, 79, 0.8);margin: 0 auto;height: 20px;width: 2px;float: none;
}
/*----关于按钮的配置-----------------------------------------------------------------*/

基本就这些，自己琢磨一些东西并完成还是很有成就感的

orgchart实现组织结构图相关推荐

orgchart.js组织结构图,优雅的方式呈现结构数据
orgchart.js组织结构图,优雅的方式呈现结构数据 orgchart.js组织结构图创建简单.灵活且高度可定制的组织结构图,以优雅的方式呈现结构数据. orgchart.js组织结构图是经理用来 ...
2016 年度开源中国新增开源软件排行榜 TOP 100
1.iBase4J:Java 开源框架整合 iBase4J 是基于 Java 的开源框架搭建的分布式系统架构. 使用 Maven 对项目进行模块化管理,提高项目的易开发性.扩展性. 系统包括三个模块: ...
vue拓扑图、组织结构图插件使用(orgChart.js)
今天使用orgChart没有找到合适的,所以今天来写篇使用文档. OrgChart.js是什么? 基于ES6的组织结构图插件. 特征支持本地数据和远程数据(JSON). 基于CSS3过渡的平滑扩展/ ...
组织结构图OrgChart.js的简单使用,实现树状图结构
OrgChart.js是什么? 基于ES6的组织结构图插件. 特征支持本地数据和远程数据(JSON). 基于CSS3过渡的平滑扩展/折叠效果. 将图表对齐为4个方向. 允许用户通过拖放节点更改组织结 ...
jquery组织结构图插件（基于jit-yc 做可拖动、自适应伸缩的orgchart)
一个基于jquery jit-yc插件实现的orgchart结构图demo 首先后台处理转入JSON数据是必须的, var json = {"id": 1,"name& ...
组织结构图OrgChart.js
环境配置先引入两个文件: <link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel=" ...
使用OrgChart插件生成家谱组织结构图
1.orgchart插件: github地址:https://github.com/dabeng/OrgChart 2.前端代码: //1.加载树形数据:ajax请求获取json格式的数据(flag参 ...
orgChart的简单使用,实现树状图、组织结构图结构
还不知道这个插件的小伙伴可以先去官网下载,orgchart官网链接呐,下载下来就是这样的: 我们把他解压出来: 点进去以后,直接找到index.html文件用浏览器打开,就是这样的啦: 这1--24 ...
使用Javascript来实现的超炫组织结构图(Organization Chart)
最近有个内部项目需要使用组织结构图(organization chart), 寻找了一些开源的项目及其类库,发现竟然没有现成的JS类库可以使用,找到一些简单的JS实现,不过界面及其操作及其简单,不过功 ...

orgchart实现组织结构图

orgchart实现组织结构图相关推荐

最新文章

热门文章