orgChart实现竖向排列组织图（js实现组织机构图）

一、前言

快过年了，博主这几天不算忙，又刚好用到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 tdp
			if(!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;
    else
        return 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>