组织架构图实现——jOrgChart的使用

￡神魔★判官ぃ 2022-10-16 09:41 192阅读 0赞

最近公司需要做一个组织架构图，具体的功能如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
我这边是做了横向和纵向两种展示方式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
目前这个还不是最终定稿，先不管了，光做这些就花了我好几天的时间了。jq操作dom我已经忘光了。。

## 步骤1：百度检索，查找orgchart的实例 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
然后下载实例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]

## 步骤2：实例引用 ##

#### 1.js/css部分的引用 ####

<script src="~/Scripts/Common/jquery-1.10.2.js"></script>
    <script src="~/Scripts/Common/html2canvas.min.js"></script>
    
    <link href="~/Content/css/jquery.orgchart.css" rel="stylesheet" />
    
    <script src="~/Scripts/Common/jquery.orgchart.js"></script>

#### 2.自定义style样式 ####

#### 3.html部分代码 ####

<div>
        <h4 class="h4title">元器件部门组织架构图</h4>
        <div class="btngroup">
            <span class="active" onclick="directionFn(this,1)">横向</span>
            <span onclick="directionFn(this,2)">纵向</span>
        </div>
        <div id="chart-container"></div>
    </div>

#### 4.js部分——最重要 ####

根据最终的效果图，实现功能：

1.  横向 纵向切换
2.  组织架构图渲染,点击子节点可以弹窗出现详情

###### **1.横向与纵向的切换** ######

###### **2.渲染组织架构图** ######

其实用不用`vue`都无所谓了，因为用了`jorgchart`是用`字符串拼接`的方式来拼接`dom`，用的是`jq`的方式：

效果图更改：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]  
由于组织架构图都是层级嵌套的，如果没有层级嵌套，会直接一行展示数据，比较丑。现在的需求就是：将横向的数据添加到每一项的children中，然后变成子级嵌套的形式，效果如上图所示：

这个肯定要用到递归，但是我不会写……

想了好久，终于被我想通了，哈哈：  
代码奉上：

recurrenceData(arr, data) { 
        var i = 0;
        arr && arr.forEach(a => { 
            if (a.children&&a.children.length) { 
            //递归查找最后一级没有children的子级，找到就要赋值一个数据
                this.recurrenceData(a.children,data);
            } else { 
                if (data.length > 0) { 
                    a.children = data.splice(0, 1);
                }
            }
        })
    },
    handleData(dataArr, n) { 
        dataArr && dataArr.forEach(child => { 
            if (child.children && child.children.length > 5) { 
                var data = child.children.splice(5, child.children.length - 1);
                child.children && child.children.map(c => { 
                    if (data.length) { 
                        c.children = data.splice(0, 1);
                    }
                })
                //如果一行超过5个，则需要转行，就是把剩余的数据放到前5项里面的children中
                var row = Math.ceil(data.length / 5);
                //具体递归函数需要执行多少次，跟行数有关，每行5个，就可以得出需要执行的行数了
                for (var i = 0; i < row; i++) { 
                    if (data.length) { 
                        child.children && child.children.map(c => { 
                        //这个就是递归函数
                            this.recurrenceData(c.children, data);
                        })
                    }
                }
            }
        })
        return dataArr;
    },

简单吧，因为我的js很菜，所以花了很久的时间，完成！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221014/879927e88f8047768935b65b17a55f17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221014/90ca89f4cf93419882f3e3ab7434703e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221014/8c0c6bcc40aa4e31b33fe232db539d9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20221014/f70a0a223c9a445aaf9b434a40fb1366.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20221014/27981d33191f40958fa37067f1d03866.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20221014/342bc82c2d344f96965abb9184e6ef2f.png