js+HTML实现组织结构图

已于 2022-03-02 11:48:06 修改
阅读量2.2k 收藏 8
点赞数 4
分类专栏： 转载 文章标签： css html javascript
于 2022-03-02 11:44:40 首次发布
原文链接：https://blog.csdn.net/weixin_44135121/article/details/87385437
版权

 记得引用jQuery。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Title</title>
</head>
<style>
    @media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {
        .ie_display{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .ie_margin{
            margin-left: -10px!important;
        }
    }
</style>
<body style="overflow-y: scroll;">
<div id="depart" style="display: flex;justify-content: center;padding: 30px"></div>
</body>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
    var isCompany = false;
    //配置公司背景色，部门背景色，用户所在部门背景色
    var comBackground = 'linear-gradient(#2196f3,#4c6cca)';
    var depBackground = 'linear-gradient(#673ab7,#4c6cca)';
    var userBackground = 'linear-gradient(#4CAF50,#4c6cca)';
    //获取用户所在部门和id
    var userDepName = '技术部';
    var userDepId = '7';
    var isHasTopCom = false;//是否需要另设顶层公司
    var topCompany = 'XXX集团有限公司';//顶层公司名称
 
    //1.接口返回原始数据结构
    var depArr = [
        // {departmentname: 'CEO', subcompanyid1: '2', supdepid: '0', id: '1'},
        // {departmentname: '销售与市场', subcompanyid1: '3', supdepid: '1', id: '2'},
        // {departmentname: '生产', subcompanyid1: '2', supdepid: '1', id: '3'},
        // {departmentname: '人力资源部', subcompanyid1: '2', supdepid: '2', id: '4'},
        // {departmentname: '物流&客服部', subcompanyid1: '3', supdepid: '3', id: '5'},
        // {departmentname: '计划&采购部', subcompanyid1: '3', supdepid: '3', id: '6'},
        // {departmentname: '技术部', subcompanyid1: '2', supdepid: '4', id: '7'},
        // {departmentname: '采购部', subcompanyid1: '2', supdepid: '5', id: '8'},
        // {departmentname: '销售部', subcompanyid1: '2', supdepid: '6', id: '9'},
    ];
    var comArr = [
        {subcompanyname: '国家DIP技术指导委员会', supsubcomid: '0', id: '1'},
        {subcompanyname: '专家指导组', supsubcomid: '1', id: '2'},
        {subcompanyname: '评审委员会', supsubcomid: '1', id: '3'},
		{subcompanyname: '办公室', supsubcomid: '1', id: '4'},
    ];
 
     //2.将接口返回的数据拼接成链表结构
    function findDep(depArr, str, arrNew) {
        var arr = arrNew || [];
        depArr.map(function(item, index){
            if (item.departmentname == str) {
                depArr.map(function(item1, index){
                    if (item1.id == item.supdepid) {
                        arr.push(item1);
                        if (item.supdepid == '0') {
                            return;
                        }
                        findDep(depArr, item1.departmentname, arr);
                    }
                })
            }
        })
        return arr;
    }
    var newComArr = [];
    if(isHasTopCom){
        newComArr.push({
            departmentname: topCompany,
            supdepid: '0',
            id: '8888',
        });
    }
    comArr.map(function(item, index){
        if(isHasTopCom){
            if (item.supsubcomid === '0') {
                item.supsubcomid = '8888';
            };
        }
        newComArr.push({
            departmentname: item.subcompanyname,
            supdepid: item.supsubcomid,
            id: item.id,
        });
    });
    function bibao(obj, s, m, str) {
        var x1 = m || [];
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].supdepid == s) {
                x1.push(obj[i]);
                x1.map(function (item, index) {
                    if (item.subcompanyid1 && isCompany) {
 
                    } else {
                        x1[index].child = [];
                    }
                    if (str) {
                        isCompany = true;
                        for (var i = 0; i < str.length; i++) {
                            if (item.id == str[i].subcompanyid1 && !item.subcompanyid1) {
                                x1[index].child.push(str[i]);
                            }
                        }
                    }
                    return bibao(obj, item.id, x1[index].child, str);
                })
            }
        }
        return x1;
    };
    var arr = bibao(depArr, '0');
    var gData = bibao(newComArr,'0', [], arr);
 
    //3.界面和样式的处理
    function generate(obj, num, cb) {
        if (obj && obj[0]) {
            obj.map(function (item, index) {
                var html = '';
                var str = item.departmentname;
                if (item.departmentname.indexOf(" ") > -1) {
                    item.departmentname = item.departmentname.replace(/\s*/g, "");
                }
                var str1 = '';
                if (item.departmentname.indexOf('-') > -1) {
                    str1 = item.departmentname.replace(/-/g, '')
                }else if (item.departmentname.indexOf('&') > -1) {
                    str1 = item.departmentname.replace(/&/g, '')
                }else if (item.departmentname.indexOf('—') > -1) {
                    str1 = item.departmentname.replace(/—/g, '')
                } else if (item.departmentname.indexOf('.') > -1) {
                    str1 = item.departmentname.replace(/./g, '')
                } else if (item.departmentname.indexOf('（') > -1) {
                    str1 = item.departmentname.replace(/（/g, '')
                } else if (item.departmentname.indexOf('）') > -1) {
                    str1 = item.departmentname.replace(/）/g, '')
                } else if (item.departmentname.indexOf('（') > -1 && item.departmentname.indexOf('）') > -1) {
                    str1 = item.departmentname.replace(/（/g, '').replace(/）/g, '');
                } else if (item.departmentname.indexOf('(') > -1 && item.departmentname.indexOf(')') > -1) {
                    str1 = item.departmentname.replace('(', '').replace(')', '');
                } else if (item.departmentname.indexOf('-') > -1 && item.departmentname.indexOf('(') > -1 && item.departmentname.indexOf(')') > -1) {
                    str1 = item.departmentname.replace(/-/g, '').replace('(', '').replace(')', '');
                } else if (item.departmentname.indexOf('-') > -1 && item.departmentname.indexOf('（') > -1 && item.departmentname.indexOf('）') > -1) {
                    str1 = item.departmentname.replace(/-/g, '').replace(/（/g, '').replace(/）/g, '');
                } else {
                    str1 = item.departmentname;
                }
                var idStr = str1 + item.id;
                var idStrSpan = item.departmentname + item.id + 'span';
                var child = item.child;
                var spanBar = num != 1 ? "<div style='background: #4c6cca;display: block;width: 3px;height: 20px;margin: auto;'></div>" : "<span></span>";
                var background = item.subcompanyid1 ? depBackground : comBackground;
                if (item.departmentname == userDepName && item.id== userDepId) {
                    background = userBackground;
                }
                var span = child && child.length > 0 ? "<div id=" + idStrSpan + " style='color:#fff;cursor:pointer;font-size: 25px;margin-top: -10px'  onclick='display(" + JSON.stringify(item) + ",$(this)," + index + ")'>+</div>" : "<span></span>";
                html += "<div class='ie_display' style='text-align: center;font-size:14px;color:#fff;width: 200px'><div style='display:flex;align-items: center'><div>" + spanBar + "<div style='background: " + background + ";box-shadow:5px 5px 5px #6A48D7;width: 150px;margin: auto;text-align: center;border-radius: 5px;display: flex;align-items:center;justify-content:space-between;height: 60px'><div style='width: 20px'></div><div>" + str + "</div><div style='display: flex;flex-direction: column;height: 100%;justify-content: space-between'>" + span + "<div style='align-self: flex-end;width: 20px;border-radius: 50%;background: #fff;color: #4c6cca'>" + child.length + "</div></div></div></div></div><div id=" + "'" + idStr + "'" + " style='display: flex;justify-content: center;'></div></div>";
                if (cb) {
                    cb(html)
                }
            })
        }
    };
    generate(gData, 1, function (html) {
        $('#depart').append(html)
    });
 
    //4.点击触发generate方法挂载界面(点击右上角的+或-按钮)
    function display(item, that, index) {
        var str1 = '';
        if (item.departmentname.indexOf('-') > -1) {
            str1 = item.departmentname.replace(/-/g, '')
        } else if (item.departmentname.indexOf('&') > -1) {
            str1 = item.departmentname.replace(/&/g, '')
        }else if (item.departmentname.indexOf('—') > -1) {
            str1 = item.departmentname.replace(/—/g, '')
        } else if (item.departmentname.indexOf('.') > -1) {
            str1 = item.departmentname.replace(/./g, '')
        } else if (item.departmentname.indexOf('（') > -1) {
            str1 = item.departmentname.replace(/（/g, '')
        } else if (item.departmentname.indexOf('）') > -1) {
            str1 = item.departmentname.replace(/）/g, '')
        } else if (item.departmentname.indexOf('（') > -1 && item.departmentname.indexOf('）') > -1) {
            str1 = item.departmentname.replace(/（/g, '').replace(/）/g, '');
        } else if (item.departmentname.indexOf('(') > -1 && item.departmentname.indexOf(')') > -1) {
            str1 = item.departmentname.replace('(', '').replace(')', '');
        } else if (item.departmentname.indexOf('-') > -1 && item.departmentname.indexOf('(') > -1 && item.departmentname.indexOf(')') > -1) {
            str1 = item.departmentname.replace(/-/g, '').replace('(', '').replace(')', '');
        } else if (item.departmentname.indexOf('-') > -1 && item.departmentname.indexOf('（') > -1 && item.departmentname.indexOf('）') > -1) {
            str1 = item.departmentname.replace(/-/g, '').replace(/（/g, '').replace(/）/g, '');
        } else {
            str1 = item.departmentname;
        }
        var str = str1 + item.id;
        var child = item.child;
        var spanLeftImg = child[0].subcompanyid1 ? './leftDep.png' : './leftCom.png';
        var spanRightImg = child[0].subcompanyid1 ? './rightDep.png' : './rightCom.png';
        if(Number($('#depart')[0].style.left.replace('px',''))>0){
 
        }else {
            $('#depart').css({
                'position': 'relative',
                'left': "0px",
                'transition-property': 'all',
                'transition-duration': '1.5s'
            });
        }
        if (child) {
            if ($('#' + str).children('div').length > 0) {
                that.html('+');
                $('#' + str + '>div').remove();
                if (child.length !== 1) {
                    $('#' + str).prev().remove();
                }
            } else {
                var firstChild = 0;
                var divLeft = 0;
                var lineWidth = 0;
                that.html('-');
                $('#' + str).before('<div style="width: 150px"><div style="background: #4c6cca;display: block;width: 3px;height: 20px;margin: auto;"></div><div style="height: 3px;background: #4c6cca;margin-left: -26px"></div></div>');
                generate(child, '', function (html) {
                    $('#' + str).append("<div style=''>" + html + "</div>");
                    $('#' + str).css('margin-bottom', '20px');
                    var childNum = $('#' + str).children('div').length;
                    var maxNum = parseInt((window.innerWidth-5)/200);
                    var siblings = ($('#' + str).parent().parent().siblings());
                    var windowWidth = window.innerWidth;
                    //右边越界
                    if ($('#' + str) && $('#' + str).children('div:first-child')[0] && ($('#' + str).children('div:last-child')[0].offsetLeft > windowWidth - 200) && child.length < maxNum) {
                        $('#depart').css({
                            position: 'relative',
                            'left': -($('#' + str).children('div:last-child')[0].offsetLeft + 200 - windowWidth) + 'px',
                            'transition-property': 'all',
                            'transition-duration': '1s'
                        });
                    }
                    for (var i = 0; i < siblings.length; i++) {
                        if ($(siblings[i])[0].childElementCount > 0 && $(siblings[i])[0].id!='span1'&& $(siblings[i])[0].id!='span2') {
                            if ($(siblings[i]).children().children('div:last-child').children().length > 0) {
                                if ($(siblings[i]).children().children('div:last-child').children().length > 1) {
                                    $(siblings[i]).children().children('div:last-child').prev().remove();
                                }
                                $(siblings[i]).children().children('div:first-child').children('div:last-child').children('div:last-child').children('div:last-child').children('div:first-child').html('+');
                                $(siblings[i]).children().children('div:last-child').children().remove();
                            }
                        }
                    }
                    if (200 * (childNum + 1) - 197 >= window.innerWidth) {
                        if (isIE()) {
                            console.log(isIE())
                            $('#' + str).css({position: 'absolute', left: '-28px', right: 0});
                        } else {
                            $('#' + str).css({position: 'absolute', left: 0, right: 0});
                        }
                        $('#' + str).css({position: 'absolute', left: 0, right: 0});
                        $('#' + str).children("div:nth-child(" + childNum + ")").css('display', 'none');
                        if ($('#' + str).children("div:first-child")[0]&&$('#' + str).children("div:first-child")[0].id != 'span1') {
                            $('#' + str).children("div:first-child").before('<div id="span1" class="ie_positon_span1" style="margin-top: 23px;cursor: pointer" onclick="leftDir(' + str + ')"><img src=' + spanLeftImg + ' alt="" style="width:40px;height: 50px"/></div>');
                        }
                        $('#' + str).children('#span1').css('visibility', 'hidden');
                        if ($('#' + str).children('#span2').length == 0) {
                            $('#' + str).children("div:nth-child(" + Number(maxNum + 1) + ")").after('<div id="span2" class="ie_margin" style="margin-top: 23px;cursor: pointer;margin-left: -40px" onclick="rightDir(' + str + ')"><img src=' + spanRightImg + ' alt="" style="width:40px;height: 50px"/></div>');
                        }
                        divLeft = $('#' + str).children("div:nth-child(2)").children("div:first-child").children("div:first-child").children("div:first-child").children("div:first-child")[0].offsetLeft+1.5;
                        lineWidth = 200 * (maxNum - 1);
                        firstChild = $('#' + str).children('#span1')&&$('#' + str).children('#span1')[0].offsetLeft;
                    } else {
                        divLeft = $('#' + str).children("div:first-child").children("div:first-child").children("div:first-child").children("div:first-child").children("div:first-child")[0].offsetLeft;
                        lineWidth = 200 * (childNum - 1) + 3 ;
                        firstChild = $('#' + str).children("div:first-child")[0].offsetLeft;
                    }
                    //左边越界
                    if (firstChild+Number($('#depart')[0].offsetLeft)<=0) {
                        $('#depart').css({
                            'position': 'relative',
                            'left': -firstChild + 'px',
                            'transition-property': 'all',
                            'transition-duration': '1s'
                        });
                    }
                    $('#' + str).prev().children("div:last-child").css({
                        'width': lineWidth + 'px',
                        'margin-left': '0px',
                        'position': 'absolute',
                        'left': divLeft+ 'px',
                    });
                    if (child.length == 1) {
                        $('#' + str).prev().remove();
                    }
                });
            }
        }
    }
 
    //5.创建用户所属的组织链条
    var count = 0;
    function findDep(depArr, str, id, arrNew) {
        var arr = arrNew || [{child: []}];
        count++;
        for (var n = 0; n < depArr.length; n++) {
            var item = depArr[n];
            if (item.departmentname == str && item.id == id) {
                for (var m = 0; m < depArr.length; m++) {
                    var item1 = depArr[m];
                    if (item1.id == item.supdepid) {
                        var itemStr = item1.child;
                        for (var i = 0; i < itemStr.length; i++) {
                            if (item.departmentname == itemStr[i].departmentname) {
                                if (count % 2 == 0) {
                                    arr[0].name = item1.departmentname;
                                    arr[0].no = i;
                                }
                                if (count % 2 != 0) {
                                    arr[0].child.push({name: item1.departmentname, no: i});
                                }
                            }
                        }
                        var arrNew = arr;
                        if (arr[0].name != undefined && arr[0].child.length > 0) {
                            arrNew = [{child: arr}];
                            count--;
                        }
                        if (item1.supdepid == '0' && item1.subcompanyid1 == undefined) {
                            return arr;
                        } else if (item1.supdepid == '0') {
                            for (var i = 0; i < newComArr.length; i++) {
                                if (newComArr[i].id == item1.subcompanyid1) {
                                    var itemStr1 = newComArr[i].child;
                                    for (var j = 0; j < itemStr1.length; j++) {
                                        if (item1.departmentname == itemStr1[j].departmentname) {
                                            arrNew[0].name = newComArr[i].departmentname;
                                            arrNew[0].no = j;
                                            return findDep(newComArr, newComArr[i].departmentname, newComArr[i].id, [{child: arrNew}]);
                                            break;
                                        }
                                    }
                                }
                            }
                        } else {
                            return findDep(depArr, item1.departmentname, item1.id, arrNew);
                        }
                        break;
                    }else if(item.supdepid == '0'){
                        var arrNew = arr;
                        if (arr[0].name != undefined && arr[0].child.length > 0) {
                            arrNew = [{child: arr}];
                            count--;
                        }
                        for (var i = 0; i < newComArr.length; i++) {
                            if (newComArr[i].id == item.subcompanyid1) {
                                var itemStr1 = newComArr[i].child;
                                for (var j = 0; j < itemStr1.length; j++) {
                                    if (item.departmentname == itemStr1[j].departmentname) {
                                        arrNew[0].name = newComArr[i].departmentname;
                                        arrNew[0].no = j;
                                        return findDep(newComArr, newComArr[i].departmentname, newComArr[i].id, [{child: arrNew}]);
                                        break;
                                    }
                                }
                            }
                        }
                    }
                }
                break;
            }
        }
    }
    var depChain = findDep(depArr, userDepName, userDepId);
    function displayDep(obj, objN, index) {
        var objM = obj[index];
        var idStrSpan = objM.departmentname + objM.id + 'span';
        display(objM, $('#' + idStrSpan));
        if (objN && objN.length > 0) {
            if (objM.departmentname == objN[0].name) {
                if (objN[0].child && objN[0].child.length > 0) {
                    displayDep(objM.child, objN[0].child, objN[0].no);
                }
            }
        }
    }
    ;
    displayDep(gData, depChain, 0);
 
    //点击右边箭头
    function rightDir(str) {
        if ($(str).children('#span1')[0].style.visibility == 'hidden') {
            $(str).children('#span1').css('visibility', 'visible');
        }
        $(str).children('#span1').next().css('display', 'none');
        $(str).children('#span1').insertAfter($(str).children('#span1').next());
        $(str).children('#span2').next().css('display', 'block');
        $(str).children('#span2').insertAfter($(str).children('#span2').next());
        if ($(str).children('#span2').next().length == 0) {
            $(str).children('#span2').css('visibility', 'hidden');
        }
        removeChild(str);
    }
 
    //点击左边箭头
    function leftDir(str) {
        if ($(str).children('#span2')[0].style.visibility == 'hidden') {
            $(str).children('#span2').css('visibility', 'visible');
        }
        $(str).children('#span1').prev().css('display', 'block');
        $(str).children('#span1').insertBefore($(str).children('#span1').prev());
        $(str).children('#span2').prev().css('display', 'none');
        $(str).children('#span2').insertBefore($(str).children('#span2').prev());
        if ($(str).children('#span1').prev().length == 0) {
            $(str).children('#span1').css('visibility', 'hidden');
        }
        removeChild(str);
    }
    //公共方法-点击箭头之后删掉下面的所属机构
    function removeChild(father) {
        $('#depart').css({
            position: 'relative',
            'left': "0px",
            'transition-property': 'all',
            'transition-duration': '1.5s'
        });
        var siblings = $(father).children();
        for (var i = 0; i < siblings.length; i++) {
            if ($(siblings[i])[0].childElementCount > 0) {
                if ($(siblings[i]).children().children('div:last-child').children().length > 0) {
                    if ($(siblings[i]).children().children('div:last-child').children().length > 1) {
                        $(siblings[i]).children().children('div:last-child').prev().remove();
                    }
                    $(siblings[i]).children().children('div:last-child').children().remove();
                    $(siblings[i]).children().children('div:first-child').children('div:last-child').children('div:last-child').children('div:last-child').children('div:first-child').html('+');
                }
            }
        }
    }
    //判断是否是ie浏览器
    function isIE() {
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
            return true;
        } else {
            return false;
        }
    }
</script>
</html>

转载：js实现组织结构图 https://blog.csdn.net/weixin_44135121/article/details/87385437

晨洛溪月
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 拓扑图 切片,HTML5复杂拓扑图（四） 组织结构图
weixin_33608403的博客
06-22 406
TWaver 阅读(5040) 评论(1) 编辑 收藏应广大客户所需，今天给大家带来一款组织结构图。组织结构图的呈现方式多种多样，用途也是非常广泛，可以应用于集团内部，企业各部门之间的组织关系呈现。我们就来看看twaver实现出来的效果。上下布局：圆形布局：这些布局用twaver来实现是非常的合适，实现起来也是很容易，twaver内部就提供了多种布局方式：自左向右，从下向上，具体可以看twav...
html5+ECharts企业内部组织结构图代码
06-11
HTML5和ECharts是现代网页开发中常用的工具，它们结合在一起可以实现丰富的数据可视化效果，包括企业内部组织结构图的绘制。在这个项目中，我们利用HTML5的Canvas或SVG元素，以及ECharts库，来创建一个动态且交互式...
bt php,bt.php · jiehu0992/家谱familytree - Gitee.com
weixin_42576804的博客
03-10 271
刘三才后裔刘氏家族族谱树* {margin: 0; padding: 0;}.tree{width:20000px; margin:40px auto 0 auto}.tree ul {padding-top: 20px; position: relative;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: al...
OrgChart.js: 构建动态组织结构图的利器
最新发布
gitblog_00086的博客
04-20 695
OrgChart.js: 构建动态组织结构图的利器 项目地址:https://gitcode.com/dabeng/OrgChart.js OrgChart.js 是一个轻量级、高性能的JavaScript库，专为构建交互式和可定制的组织结构图而设计。开发者可以通过这个库轻松地在网页中展示员工、团队或其他层次结构的数据。 项目简介 OrgChart.js 提供了一种简单的方法来可视化层次关系数据，...
【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-05 8836
一、盒子测量及样式 1、总体盒子测量及样式 2、左侧盒子测量及样式 3、中间盒子测量及样式 4、右侧盒子测量及样式 二、横版导航栏代码示例 1、HTML 标签结构 2、CSS 样式 3、显示效果
js实现组织结构图
热门推荐
杏子
02-15 1万+
一、前言 这种组织结构图是不是很熟悉？一般是以画图的形式或者word形式展现，下面给大家介绍一下如何用原生 JS 实现，以便于可以显示在网页上。 二、整理思路（实现步骤） 1. 要想实现这种复杂的组织结构图，首先需要整理具有逻辑性的数据结构，如下所示： var depArr = [ {departmentname: 'CEO', subcompanyid1: '2', su...
HTML-介绍-MDN文档学习笔记
qq_57508808的博客
02-14 1129
介绍了HTML
html的基本模板结构图
xiaozhuangyumaotao的博客
04-28 1804
下面这张图让你从整体结构上对html有个把握与认识： 我们再来区分几个概念吧： 上面这张图的每一个节点都叫做html元素，html元素又叫做html标签，他们是不同的称呼，一样的意思。 标签分为两种格式： 1.双标签，需要首尾呼应的标签：<标签名></标签名> 2.单标签：<标签名> 至于meta是那种格式，div又是哪种格式，这就需要你在使用的...
JavaScript+HTML+CSS实现图片轮播
06-06
HTML文件会包含轮播的结构和初始样式，CSS文件负责美化和动画，而JavaScript文件则实现轮播的逻辑和交互。 在实际开发中，为了提高可维护性和重用性，可能会使用模块化的方法，如ES6的`import/export`或CommonJS的`...
html5结构图canvas绘制组织结构图框架代码
11-06
Canvas通过JavaScript API提供了丰富的图形绘制功能，使得开发者无需依赖Flash或其他插件就能创建复杂的2D图形，包括组织结构图。本框架代码就是利用HTML5的Canvas元素来绘制组织结构图。 组织结构图是一种展示公司...
html js实现的组织架构图,可拖动
07-18
倒树结构图 <span class="line-h line-h-l"></span> <div class="line-v"><span></span></div> 电脑品牌 <div class="line-v"><span></span></div> <span class="line-h line-h-r"></...
前端横向组织架构图 js
12-25
横向组织架构图前端JS实现代码, 实现新增, 删除, 级联删除, 修改节点 带案例
组织架构图JS源码
10-22
组织架构图 人员汇报关系图 JS getorgchart 丰富的组织架构层次展示效果。
html5+ECharts企业内部组织结构图代码.zip
09-27
这个“html5+ECharts企业内部组织结构图代码”压缩包包含了一套利用HTML5和ECharts实现的企业组织结构图的示例代码。 首先，我们要理解HTML5的核心特性。HTML5引入了许多新元素，如、、、等，它们提供了更好的语义...
放射关系组织架构图 html源码,内部联系人通讯录－组织架构（部门－人）.html...
weixin_35710880的博客
06-09 277
内部联系人通讯录－组织架构(部门－人)$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.util...
vue2--基于zm-tree-org实现公司部门组织架构图
可可爱爱的你吖的博客
02-27 4499
vue2--基于zm-tree-org实现公司部门组织架构图
怎么利用js加html结构图,利用js实现组织架构流程图插件myflow.
weixin_31706437的博客
06-08 434
特效描述：利用js实现 组织架构 流程图 插件myflow.。利用js实现组织架构流程图插件myflow.代码结构1. 引入CSS2. 引入JS3. HTML代码日程事件导出事件ID员工ID标题URL开始时间事件ID员工ID标题URL开始时间$(document).ready(function(){var xx=[{id: 1,emptyid:"1",title: '早班',start: '201...
html文件整体结构图,html基本结构分析
weixin_31555049的博客
05-31 446
HTML称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。一个完整的HTML文档必须包含3个部分：文档声明、文档头部和文档主体。而正是它们构成了HTML的骨架结构。前面已经分别介绍过文档声明和文档头部，本...
js组织架构
叶子先生的博客
07-07 279
提速： 秒开 iconfont预加载 js,css 资源预加载 requestIdleCallback 打包加载 锁定范围 external 公共加载依赖 css3 varble js沙箱 react17 的多react实力 闭包 css隔离 styled component 按需加载 cdn url scope version
vue+D3实现组织架构横向树状图，其中点的样式可以标签自定义
07-15
你可以使用Vue.js和D3.js来实现组织架构横向树状图，并且可以自定义节点的样式。 首先，你需要安装Vue.js和D3.js。可以使用npm或yarn来安装它们： ``` npm install vue d3 ``` 或者 ``` yarn add vue d3 ``` 接...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值