orgchart组织机构图

最新推荐文章于 2025-03-31 09:50:46 发布

cst_code

最新推荐文章于 2025-03-31 09:50:46 发布

阅读量6.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/cst_code/article/details/78766961

Jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用开源库dabeng/OrgChart创建组织机构图，并提供了示例和官网链接，帮助读者理解其在实际应用中的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网地址：https://github.com/dabeng/OrgChart

<html>
<head>
    <link href="jquery.orgchart.min.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jquery.orgchart.min.js"></script>
</head>
<body>
    <div id = "chart-container">
    </div>
</body>
<script style="text/javascript">
var dataSource2 = {
  'id': 'rootNode', //每个数据节点的标识
  'collapsed': false, 
  'className': 'top-level', //样式
  'nodeTitlePro': 'Lao Lao',//节点标题
  'nodeContentPro': 'general manager',//节点数据
  'relationship': '110', 
  'children': [ 
    { 'id':'1','nodeTitlePro': 'Bo Miao', 'nodeContentPro': 'department manager', 'relationship': '111' },
    { 'id':'2','nodeTitlePro': 'Su Miao', 'nodeContentPro': 'department manager', 'relationship': '110',
      'children': [
        { 'nodeTitlePro': 'Tie Hua', 'nodeContentPro': 'senior engineer', 'relationship': '110' },
        { 'nodeTitlePro': 'Hei Hei', 'nodeContentPro': 'senior engineer', 'relationship': '110' }
      ]
    },
    { 'nodeTitlePro': 'Yu Jie', 'nodeContentPro': 'department manager', 'relationship': '110' }
  ],
  'otherPro': '110'
};

var t = $('#chart-container').orgchart({
    'data': dataSource2,
    //拖动整个架构图
    //'pan':true,
    //鼠标滚动控制大小
    'zoom':true,
    //最大放大缩小到多少
    'zoominLimit':30,
    'zoomoutLimit':0.9,
    /*控制方向The available values are t2b(implies "top to bottom", it's default value), b2t(implies "bottom to top"), l2r(implies "left to right"), r2l(implies "right to left").
    */
    //'direction':'t2b',
    //以垂直方向布局，并指定深度
    //'verticalDepth':1,
    //设置数据内容的字段，与数据源对应
    'nodeContent': 'nodeContentPro',
    'nodeTitle': 'nodeTitlePro',
    'nodeID': 'id',
    'toggleSiblingsResp':false
</script>
</html>

以下是滑过节点时提示信息，不是必须的


'createNode': function($node, data){
        $node.mouseenter(function(){
            var $promptbox  = $(this).children("#mes")
            var boxheigth = $promptbox.outerHeight();
            var boxwidth = $promptbox.width();
            $promptbox.css("top","-"+boxheigth);
            $promptbox.css("right","-"+boxwidth);
            $promptbox.fadeIn();
        });
        $node.mouseleave(function(){
            $(this).children("#mes").fadeOut();
        });
        var toggleMes = '<div id="mes" class="toggle">'+data.relationship+'</div>';
        $node.append(toggleMes);
    }

示例

这里写图片描述