orgchart组织架构

核心代码

var datascource = {
    'id':'123','name': 'Ball','pId':'',
    'children': [
        {'id':'c','name': 'Football','pId':'123',
         'children':[{'id':'e33a','name': 'Basketball','pId':'e33a',
         'children':[ {'id':'783d','name': 'Ball1','pId':'e33a'},{'id':'783d','name': 'Ball2','pId':'e33a'}]
         }]
       }
    ]
};

var oc = $('#chart-container').orgchart({
         'data' : datascource,//数据源
         'direction':'l2r',//方向
         'chartClass': 'edit-state',
         'parentNodeSymbol': 'fa-th-large',
         'nodeId': 'id',
         'createNode': function($node, data) {
             var secondMenuIcon = $('<i>', {
                 'class': 'fa fa-info-circle second-menu-icon',
                 click: function(e) {
                     $(this).siblings('.second-menu').toggle();
                     $(this).toggle();
                     e.stopPropagation()
                 }
             });
             var secondMenu = '<div class="second-menu"><i class="fa fa-plus" id="btn-add-nodes"></i><i class="fa fa-pencil-square-o"></i><i class="fa fa-times"></i></div>';
             $node.find('i.edge.verticalEdge.bottomEdge.fa').each(function(index,item){
                 item.className+=' icon-minus-sign'
   })
             $node.append(secondMenuIcon).append(secondMenu);
         }
     });

 

预览图