JS版组织结构图

资料来源：网络整理时间：2023/2/14 0:16:39 共计：3593 浏览

原来想在网上找，结果这个东西竟然没有，找到一个C#版的还是要收费，无奈只能苦战三天，终于搞定了，请各位测试，有可能往下加节点会有不对的也说不定。
请不要期待兼容性，从来不顾及这个
如果各位有更好的思路请不吝指教
另外，目前只做了一种展示方式，如果各位有兴趣需要，等我再更新
功能：支持自定义节点样式，无限级节点支持，节点间宽度高度间隔自定义，颜色线条大小自定义
修正部分错误

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS版组织结构图</title>
<style type="text/css">
.OrgBox{
font-size:12px;
padding:5px 5px 5px 5px;
clear:left;
float:left;
text-align:center;
position:absolute;
background-image:url(org.jpg);
width:70px;
height:106px;
}
.OrgBox img{
width:60px;
height:70px;
}
.OrgBox div{
color:#FFA500;
font-weight:800;
}

</style>
</head>
<body>
<script language="javascript">
function $(id) { return document.getElementById(id) }

    /*
     *@Generator -> Surnfu - Email:Surnfu@126.com - QQ:31333716 Ver:1.0.0
     *@Copyright (c) 2009 Surnfu composition http://www.on-cn.com
     *使用示例
     *==============================================================================
    var a=new OrgNode()
        a.Text="节点文本"
        a.Description="节点描述"
        a.Link="节点链接"
        //a.customParam.Img="xxx" //自定义节点参数，需要设置节点模板
    var b=new OrgNode()
        b.Text="节点文本"
        b.Description="节点描述"
        b.Link="节点链接"
    a.Nodes.Add(b);
    var OrgShows=new OrgShow(a);
        OrgShows.Top=50; //设置顶距离
        OrgShows.Left=50; //设置左距离
        OrgShows.IntervalWidth=10; //设置节点间隔宽度
        OrgShows.IntervalHeight=20; //设置节点间隔高度
        OrgShows.ShowType=2; //设置节点展示方式 1横向 2竖向
        OrgShows.BoxHeight=100; //设置节点默认高度
        //OrgShows.BoxWidth=100; //设置节点默认宽度
        //OrgShows.BoxTemplet="="<div id=\"{Id}\" style=\"font-size:12px;padding:5px 5px 5px 5px;border:thin solid orange;background-color:lightgrey; clear:left;float:left;text-align:center;position:absolute;\" title=\"{Description}\" ><a href=\"{Link}\">{Text}</a></div>";自定义节点模板
        OrgShows.LineSize=2; //设置线条大小
        OrgShows.LineColor=2; //设置线条颜色
        OrgShows.Run()
     *==============================================================================
     */
    function OrgNode() {
        this.Text = null;
        this.Link = null;
        this.Description = null;
        this.BoxWidth = null;
        this.BoxHeight = null;
        this.parentNode = null;
        this.NodeGroupId = null; //同一层的级别序号,从零开始
        this.NodeOrderId = null; //同一级中的序号,从零开始
        this.TopLine = null;
        this.BottomLine = null;
        this.Depth = null;
        this.Top = null;
        this.Left = null;
        this.Type = null;
        this.Nodes = [];
        this.customParam = []; //节点自定义参数
        var This = this;
        this.Nodes.Add = function (OrgNode_) {
            OrgNode_.parentNode = This;
            This.Nodes[This.Nodes.length] = OrgNode_;
        }
        this.Box = null;
        this.Templet = null;
        this.Id = "OrgNode_" + GetRandomId(20);

        this.inIt = function () {
            if (this.inIted == true) return;
            var tempDiv = document.createElement("DIV");
            document.body.appendChild(tempDiv);
            var tempHTML = this.Templet;
            tempHTML = tempHTML.replace("{Id}", this.Id);
            tempHTML = tempHTML.replace("{Text}", this.Text);
            tempHTML = (this.Link == null) ? tempHTML.replace("{Link}", "JavaScript:void(0)") : tempHTML.replace("{Link}", this.Link);
            tempHTML = tempHTML.replace("{Description}", this.Description);
            for (var Param_ in this.customParam) {
                tempHTML = tempHTML.replace("{" + Param_ + "}", this.customParam[Param_]);
            }
            tempDiv.innerHTML = tempHTML;
            this.Box = $(this.Id);

            if (this.BoxWidth != null) {
                if (offset(this.Box).w < this.BoxWidth) {
                    this.Box.style.width = this.BoxWidth + "px";
                    if (offset(this.Box).w > this.BoxWidth) {
                        this.Box.style.width = (this.BoxWidth - (offset(this.Box).w - this.BoxWidth)) + "px";
                    }
                }
            }

            if (this.BoxHeight != null) {
                if (offset(this.Box).h < this.BoxHeight) {
                    this.Box.style.height = this.BoxHeight + "px";
                    if (offset(this.Box).h > this.BoxHeight) {
                        this.Box.style.height = (this.BoxHeight - (offset(this.Box).h - this.BoxHeight)) + "px";
                    }
                }
            }

            this.Width = offset(this.Box).w;
            this.Height = offset(this.Box).h;
            this.inIted = true;
        }

        function GetRandomId(n_) {
            var litter = "abcdefghijklmnopqrstuvwxyz"
            litter += litter.toUpperCase()
            litter += "1234567890";
            var idRnd = "";
            for (var i = 1; i <= n_; i++) {
                idRnd += litter.substr((0 + Math.round(Math.random() * (litter.length - 0))), 1)
            }
            return idRnd;
        }
    }

    function OrgShow(OrgNode_) {
        this.LineSize = 2;
        this.LineColor = "#000000";

        this.IntervalWidth = 100;
        this.IntervalHeight = 50;
        this.Top = 0;
        this.Left = 0;
        this.Depth = 0;
        this.Nodes = [];
        this.DepthGroup = []; //this.DepthGroup[n].Nodes 层深节点集合
        //this.DepthGroup[n].NodeGroups[m] 层深节点按上层分类集合 this.DepthGroup[n].NodeGroups[m][k]层深节点
        var This = this;
        this.BoxWidth = null;
        this.BoxHeight = null;
        this.BoxTemplet = null;
        this.ShowType = null;

        this.Run = function () {
            BoxInit(OrgNode_);
            GetDepth(OrgNode_);
            SetDepthsHeight()//设置层深高度

            //***************************
            for (var n = 1; n <= this.Depth; n++) {//设置顶距离
                var tempTop = this.Top + GetDepthHeightToRoot(n);
                var tempNodes = this.DepthGroup[n].Nodes;
                for (var m = 0; m < tempNodes.length; m++) {
                    tempNodes[m].Top = tempTop;
                }
            }

            //***************************
            for (var n = this.Depth; n >= 1; n--) {//设置左距离
                var DepthNodes = this.DepthGroup[n].Nodes;
                if (n == this.Depth) {
                    for (var m = 0; m < DepthNodes.length; m++) {
                        if (m == 0) {
                            DepthNodes[m].Left = 0;
                        } else {
                            DepthNodes[m].Left = DepthNodes[m - 1].Left + DepthNodes[m - 1].Width + this.IntervalWidth;
                        }
                    }
                } else {
                    for (var m = 0; m < DepthNodes.length; m++) {
                        if (DepthNodes[m].Nodes.length != 0) {
                            var tempNodeLeft_ = DepthNodes[m].Nodes[0].Left + (GetGroupWidthByNode(DepthNodes[m].Nodes[0]) / 2);
                            tempNodeLeft_ -= (DepthNodes[m].Width / 2);
                            DepthNodes[m].Left = tempNodeLeft_;
                        }
                    }
                    for (var m = 0; m < DepthNodes.length; m++) {
                        if (DepthNodes[m].Left == null) {
                            SetLeftByDepthNode(DepthNodes, m, "LTR");
                        }
                    }
                }
            }
            SetDepthGroupWidth();//设置群组宽度

            //***************************
            for (var n = 1; n <= this.Depth; n++) {//设置竖线条
                var tempNodes = this.DepthGroup[n].Nodes;
                for (var m = 0; m < tempNodes.length; m++) {
                    if (n != this.Depth) {//设置底线条
                        if (tempNodes[m].Nodes.length != 0) {
                            var tempLineLeft = tempNodes[m].Left + (tempNodes[m].Width / 2);
                            var tempLineHeight = ((this.IntervalHeight - this.LineSize) / 2);
                            tempLineHeight += (this.DepthGroup[n].Height - tempNodes[m].Height);
                            var tempLineTop = tempNodes[m].Top + tempNodes[m].Height;
                            var tempBottomLine = new CreateLine(2, tempLineTop, tempLineLeft, tempLineHeight, this.LineSize, this.LineColor, "LineBottom_" + tempNodes[m].Id);
                            tempNodes[m].BottomLine = tempBottomLine.Line;
                        }
                    }
                    if (n != 1) {//设置顶线条
                        var tempLineLeft = tempNodes[m].Left + (tempNodes[m].Width / 2);
                        var tempLineHeight = ((this.IntervalHeight - this.LineSize) / 2);
                        var tempLineTop = tempNodes[m].Top - tempLineHeight;
                        if (this.DepthGroup[tempNodes[m].Depth].NodeGroups[tempNodes[m].NodeGroupId].length == 1) {//如果只有一个节点
                            var tempBottomLineHeight = parseFloat(tempNodes[m].parentNode.BottomLine.style.height) + this.LineSize;
                            tempNodes[m].parentNode.BottomLine.style.height = (tempLineHeight + tempBottomLineHeight) + "px";
                        } else {
                            var temptopLine = new CreateLine(2, tempLineTop, tempLineLeft, tempLineHeight, this.LineSize, this.LineColor, "LineTop_" + tempNodes[m].Id);
                            tempNodes[m].TopLine = temptopLine.Line;
                        }
                    }
                }
            }

            for (var n = 2; n <= this.Depth; n++) {//设置横线条
                var tempNodeGroups_ = this.DepthGroup[n].NodeGroups;
                for (var m = 0; m < tempNodeGroups_.length; m++) {
                    if (tempNodeGroups_[m].length != 1) {
                        var tempLineWidth = tempNodeGroups_[m].Width - (tempNodeGroups_[m][0].Width / 2) + this.LineSize;
                        tempLineWidth -= (tempNodeGroups_[m][tempNodeGroups_[m].length - 1].Width / 2);
                        var tempLineTop = tempNodeGroups_[m][0].Top - ((this.IntervalHeight - this.LineSize) / 2) - this.LineSize;
                        var tempLineLeft = tempNodeGroups_[m][0].Left + (tempNodeGroups_[m][0].Width / 2);
                        var tempGroupLine = new CreateLine(1, tempLineTop, tempLineLeft, tempLineWidth, this.LineSize, this.LineColor, "LineGroup_" + tempNodeGroups_[m][0].Id);
                    }
                }
            }

            //*************************************************************************************************
        }
        function GetGroupWidthByNode(Node_) {//根据群组中任一节点，取得群组宽度
            var tempNodesGroup_ = This.DepthGroup[Node_.Depth].NodeGroups[Node_.NodeGroupId];
            var tempGroupWidth_ = tempNodesGroup_[tempNodesGroup_.length - 1].Left - tempNodesGroup_[0].Left;
            tempGroupWidth_ += tempNodesGroup_[tempNodesGroup_.length - 1].Width
            return tempGroupWidth_;
        }

        function GetDepthHeightToRoot(DepthId) {//取得距离顶层的高度
            var tempHeight_ = 0;
            for (var x_ = DepthId; x_ >= 1; x_--) {
                tempHeight_ += This.DepthGroup[x_].Height;
            }
            tempHeight_ += This.IntervalHeight * (DepthId - 1);
            tempHeight_ -= This.DepthGroup[DepthId].Height;
            return tempHeight_;
        }

        function ChildNodesWidth(OrgObj) {//取得层宽
            var ReWidth = 0;
            for (var s_ = 0; s_ < OrgObj.Nodes.length; s_++) {
                ReWidth += OrgObj.Nodes[s_].Width;
            }
            ReWidth += (OrgObj.Nodes.length - 1) * This.IntervalWidth;
            return ReWidth;
        }

            if (OrgObj.Nodes.length != 0) {
                for (var n = 0; n < OrgObj.Nodes.length; n++) {
                    GetDepth(OrgObj.Nodes[n]);
                }
            }
        }
        function BoxInit(OrgObj_) {//节点初始化
            OrgObj_.Templet = GetBoxTemplet();
            OrgObj_.BoxWidth = This.BoxWidth;
            OrgObj_.BoxHeight = This.BoxHeight;
            OrgObj_.inIt();

            if (OrgObj_.Nodes.length != 0) {
                for (var n = 0; n < OrgObj_.Nodes.length; n++) {
                    BoxInit(OrgObj_.Nodes[n]);
                }
            }
        }

}

    var a = new OrgNode()
    a.customParam.EmpName = "张明"
    a.customParam.department = "总经办"
    a.customParam.EmpPhoto = "org1.jpg"

    var b = new OrgNode()
    b.customParam.EmpName = "陈黎明"
    b.customParam.department = "运营部"
    b.customParam.EmpPhoto = "org2.jpg"

var c = new OrgNode()
c.customParam.EmpPhoto = "org1.jpg"

var d = new OrgNode()
d.customParam.EmpPhoto = "org1.jpg"

var e = new OrgNode()

var f = new OrgNode()

var g = new OrgNode()

var h = new OrgNode()

var k1 = new OrgNode()

var x = new OrgNode()

var y = new OrgNode()

var z = new OrgNode()

var z1 = new OrgNode()

var z11 = new OrgNode()

var z12 = new OrgNode()

var z13 = new OrgNode()

    z1.Nodes.Add(z11);
    z1.Nodes.Add(z12);
    z1.Nodes.Add(z13);

    var z2 = new OrgNode()
    z2.Text = "三-2"
    z2.Description = "zxxxcz"

    var y1 = new OrgNode()
    y1.Text = "三员工一-1"
    y1.Description = "zxxxcz"

    var y2 = new OrgNode()
    y2.Text = "三员工一-2"
    y2.Description = "zxxxcz"

    var y21 = new OrgNode()
    y21.Text = "三员工一-2-1"
    y21.Description = "zxxxcz"

    var y22 = new OrgNode()
    y22.Text = "三员工一-2-2"
    y22.Description = "zxxxcz"

    y2.Nodes.Add(y21);
    y2.Nodes.Add(y22);
    y.Nodes.Add(y1);
    y.Nodes.Add(y2);
    z.Nodes.Add(z1);
    z.Nodes.Add(z2);
    x.Nodes.Add(y);
    x.Nodes.Add(z);
    g.Nodes.Add(h);
    g.Nodes.Add(k1);
    a.Nodes.Add(b);
    a.Nodes.Add(x);
    a.Nodes.Add(c);
    b.Nodes.Add(g);
    c.Nodes.Add(d);
    c.Nodes.Add(e);
    c.Nodes.Add(f);

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：通过自定义MVC的Controller的Json转换器解决日期序列化格式问题 | ·下一条：C#学习笔记——集合与数据结构