一、前言

快过年了，博主这几天不算忙，又刚好用到orgChart来做组织机构图，写了这篇文章，欢迎大家指正。注意：我说的竖向是指文字竖着排列。

依赖库：jquery，jquery颜色选择器，orgChart组织框图

orgChart文档：orgChart

颜色选择器：jquery颜色选择器插件

demo预览地址：https://zekeup.com/openSource/OrgChart-Vertical/index.html

demo下载地址（rar压缩包）：https://zekeup.com/package/OrgChart-Vertical.rar

话不多说，先整效果图给大家看看

图1

主要实现功能：横向竖向，还有背景颜色修改

二、思路：

如何把默认横排变成竖排？在orgChart初始化时，有一个createNode属性，他返回一个$node对象，这是很重要的，博主想到给想要显示成竖排的节点添加一个class，通过修改默认样式，实现竖向排列。

三、关键代码

js代码，依赖jquery

var oc=null;
$(function() {//本地session存储// if(sessionStorage.getItem('data_org')){//     data_org=JSON.parse(sessionStorage.getItem('data_org'));// }// sessionStorage.setItem('data_org',JSON.stringify(data_org));getModelChart();//颜色选择器$('.bgColor').colpick({layout:'hex',submit:0,colorScheme:'dark',onChange:function(hsb,hex,rgb,el,bySetColor) {//改变颜色let id=$(el).attr('data-id');$('.node_'+id+ ' .title').css({background: '#'+hex,});$(el).css('border-color','#'+hex);if(!bySetColor) $(el).val('#'+hex);},onBeforeShow:function(el){if(!isNull(this.value)){$(this).colpickSetColor(this.value.substring(1));}$(el).css({'z-index':'20000',});}}).keyup(function(){if(!isNull(this.value)){$(this).colpickSetColor(this.value.substring(1));}});
});getModelChart = function(){oc=$('#chart-container').orgchart({'data' : data_org,'depth': 20,'nodeTitle': 'name','direction': 't2b','exportButton': true,'exportFilename': '模型关系图','pan': true,'createNode': function($node, data) {$node.addClass('node_'+data.id);//背景颜色if(!isNull(data.bgColor)){$node.children('.title').css('background-color',data.bgColor);}else{//默认$node.children('.title').css('background-color','#0295ff');}//横排竖排 思路 给竖向的td上加上class tdpif(!isNull(data.style) && data.style=='V'){$node.addClass('hNode');}$("#addTop").css('display','none');if(isNull(data.name)){data.name="无";}if(isNull(data.orderNum)){data.orderNum="无";}if(isNull(data.remarks)){data.remarks="无";}if(isNull(data.bgColor)){data.bgColor="";}if(isNull(data.style)){data.style="";}strContent=data.id+"～~～"+data.name+"～~～"+data.remarks+"～~～"+data.orderNum+"～~～"+data.parentId+"～~～"+data.bgColor+"～~～"+data.style;//替换换行符data.name=data.name?data.name.replace(/<br\/>/g,''):'';var strTable="<table class='tab'>" +"<tr style='height: 50px;text-align:top;'>" +"<td  colspan='2' class='dd' >" +"<div class='bumenxinxi'><p>"+data.name+"</p></div>" +"<div><a href='javascript:void(0)' onclick='closeDlg()' class='guanb'>X</a></div>"+"</td>" +"</tr>"+"<tr class='neirong'>" +"<td class='xinxi-zuo'>排序:</td>" +"<td class='tdd'>"+data.orderNum+"</td>" +"</tr>"+"<tr class='neirong'>" +"<td class='xinxi-zuo'>备注:</td>" +"<td class='tdd'>"+data.remarks+"</td>" +"</tr>"+"<tr class='neirong'>" +"<td class='anliudahezi' colspan='2'>" +"<div class='anliuhezi'>" +"<div class='anliu'><a href='javascript:void(0)' onclick='del(\""+data.id+"\")'>刪除</a></div>" +"<div class='anliu'><a href='javascript:void(0)' onclick='editParent(\""+strContent+"\")'>编辑</a></div>" +"<div class='anliu'><a class='bgColor' data-id='"+data.id+"' href='javascript:void(0)'>改变颜色</a></div>" +"<div ><a class='anliu-tj' href='javascript:void(0)' onclick='addSub(\""+data.id+"\",\""+data.bgColor+"\",\""+data.style+"\")'>添加下级</a></div>" +"</td>" +"</tr></table>";var nodePrompt = $('<i>', {'class': 'fa fa-info-circle second-menu-icon','style': 'width:100%; height:100%;',click: function() {var flag=false;if($(this).siblings('.second-menu').css('display')=='block'){flag=true;}//打开弹出框 ，先关闭所有再打开$(".second-menu").css('display','none');if(flag){$(this).siblings('.second-menu').hide();}else{$(this).siblings('.second-menu').show();}}});var secondMenu = '<div class="second-menu t2b">'+strTable+'</div>';$node.append(nodePrompt).append(secondMenu);}});$(".orgchart").css('background','#fff');
}//判断是否为空
isNull=function(str) {if (typeof (str) == "undefined" || str == null || str == "" || str == "null")return true;elsereturn false;
};//关闭详细信息弹出框
closeDlg=function(){$(".second-menu").css('display','none');
};
//编辑
editParent=function(strContent){var arr=strContent.split("～~～");var formData={'id':arr[0],'name':arr[1],'remarks':arr[2],'orderNum':arr[3],'parentId':arr[4],'bgColor':arr[5],'style':arr[6],};$("#formData").form("load", formData);$('#bgColor').css('border-color',arr[5]);$('#dlg').dialog('open');
};//添加下级
addSub=function(parentId,bgColor,style){// $("#formData").form("clear");// formDataView("formData","edit");$("#parentId").val(parentId);$("#bgColor").val(bgColor);$('#bgColor').css('border-color',bgColor);$("#styleM").combobox('setValue',style);// $('#dlg').dialog('open');
};
//关闭弹出层
closeDialog=function(){// $('#dlg').dialog('close');
};
//关闭弹出层
mainCloseDialog=function(){$('#mainDlg').dialog('close');
};function del(id){// data_org.forEach(element => {// });
}function test(){if(oc){var hierarchy = oc.getHierarchy();console.log('结果在控制台打印',hierarchy);alert('结果在控制台打印'+hierarchy);}}

css代码。实现竖排效果

html,body{height: 100%;width: 100%;margin: 0;
}
.orgchart{height: 100%;width: 100%;overflow: auto;}*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}#chart-container {overflow-x: auto;position: relative;height: 100%;text-align: center;}/* 菜单 */.orgchart .node .second-menu {display: none;position: absolute;top: 0;left: 100%;border-radius: 10px;box-shadow: 0 0 10px 1px #999;background-color: #FFF;z-index: 30;}.orgchart .node .second-menu .avatar {width: 60px;height: 60px;border-radius: 30px;}.l2r{transform:rotate(-90deg) translate(-40px,-40px) rotateY(180deg);}.r4l{transform: rotate(90deg) translate(40px,0px) rotateY(-90deg);}.dd{text-align:top;border-bottom: 1px solid #0295ff;}.bumenxinxi{text-align: left;margin-left: 10px;float: left;color:#0295ff; font-size: 20px; height: 30px; line-height: 40px;vertical-align:top;}.guanb{width: 40px;height: 40px;float: right; line-height: 40px;text-align:center;color: #0295FF; text-decoration: none;}.xinxi-zuo{width: 100px;text-align: right; color: darkslategray;font-size:18px;}.anliu{float: right; line-height: 30px;width: 70px; height: 30px;text-align: center;border: 1px solid gray;margin: 5px; border-radius:3px ; }.anliu>a,.anliu-tj{width: 80px;height: 30px;text-decoration: none; color: #4a4545;}.anliu-tj{background-color: #0295FF; float: right;color: white; line-height: 30px; text-align: center;margin: 5px; border-radius:3px ; }.anliuhezi{ width: auto;height: 40px;display: flex;}.anliudahezi{height:40px;vertical-align:bottom;}.tdd{padding-left: 10px;font-size:18px;}.neirong{line-height:40px;}.orgchart .node .title .symbol{float: left;height:100%;margin-top:0;line-height: inherit;}.orgchart .node .title{text-align: center;font-size: 14px;font-weight: 700;height: 40px;line-height: 40px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;background-color: #0295ff;color: #fff;border-radius: 4px;}.orgchart .second-menu-icon {transition: opacity .5s;opacity: 0;right: 0;top: 0;text-align:right;padding:3px 3px 0 0;z-index: 2;font-size: 14px;position: absolute;color: #fff;}.orgchart .node:hover .second-menu-icon {opacity: 1;}/*竖向文字  思路 给竖向的加上class hNode */.orgchart .hNode .title .symbol{display:none;float: left;margin-left:0;margin-top:0;width:100%;text-align: center;height:20px;}.orgchart .hNode{width:50px;padding:0;margin:0 10px;}.orgchart .hNode .title{font-size: 14px;padding: 20px 15px;font-weight: 700;height: auto;line-height: 18px;overflow: hidden;text-overflow: inherit;white-space: normal;color: #fff;border-radius: 4px;width: 100%;word-break: break-word;/*强制换行*/}/* 字符省略 */.orgchart .ellipsis-icon{left: 0;bottom: 0px;padding-bottom:4px;width:100%;text-align: center;z-index: 1;color: #fff;font-size: 14px;position: absolute;}

html代码

<div id="chart-container" style="width:100%;height: 100%"></div>