orgchart组织机构图

官网地址: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 = '
'+data.relationship+'
'
; $node.append(toggleMes); }

示例

orgchart组织机构图_第1张图片

你可能感兴趣的:(Jquery)