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

亦凉 2022-03-21 04:48 609阅读 0赞

一、前言

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

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

orgChart文档：[orgChart][]

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

demo预览地址：[https://zekeup.com/openSource/OrgChart-Vertical/index.html][https_zekeup.com_openSource_OrgChart-Vertical_index.html]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcxMTU5Mw_size_16_color_FFFFFF_t_70][]图1

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

二、思路：

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

三、关键代码

js代码，依赖jquery

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代码

[orgChart]: https://github.com/dabeng/OrgChart?tdsourcetag=s_pctim_aiomsg
[jquery]: http://www.jq22.com/jquery-info367
[https_zekeup.com_openSource_OrgChart-Vertical_index.html]: https://zekeup.com/openSource/OrgChart-Vertical/index.html
[https_zekeup.com_package_OrgChart-Vertical.rar]: https://zekeup.com/package/OrgChart-Vertical.rar
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcxMTU5Mw_size_16_color_FFFFFF_t_70]: /images/20220321/9374aaa1ef2d40b399642a00e24fc772.png