orgchart实现组织结构图

文章正文

发布时间：2024-12-21 16:58

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>

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

NameTypeRequiredDefaultDescription
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; } /*----关于按钮的配置-----------------------------------------------------------------*/

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

标签