之前项目需要我搞一个组织架构图，用大约一周时间挑选了框架并开发，最后用orgchart搞出来了，先上结果图
orgchart下载地址 ：https://github.com/dabeng/OrgChart
打开下载的压缩包，如下图
然后可以打开demo目录，里面是例子，我们可以根据例子来修改成我们自己的样式，先来看一下他的基本样式
打开之后我们就可以根据他的例子来进行修改，我的组织结构图的主要代码如下：
<%--
Created by IntelliJ IDEA.
User: mz
Date: 2018/10/18
Time: 10:45
To 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;
}
/*----关于按钮的配置-----------------------------------------------------------------*/
基本就这些，自己琢磨一些东西并完成还是很有成就感的
6663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
