前后端开发之JQuery的orgchart组件实现组织架构图

参考网站示例

需引用的文件：jquery.orgchart.css  ，jquery.min.js ，html2canvas.js，jquery.orgchart.js

html代码：

<div id="chart-container"></div>

js代码：

$('#chart-container').orgchart({
  'data' : datascource,//数据源  可以是js对象也可以后端的api地址
  'depth': 6, //需要展示的组织架构图的深度
  'nodeTitle': 'title',//节点上一层文本  （值为对象的属性名）
  'nodeContent': 'name'//节点下一层文本（值为对象的属性名）
});

数据源格式：

 {

   id : ' ',

  name : ' ',

  title : ' ',

  relationship : {

    parent_num : ' ',//上级节点个数

    children_num : ' ' //下级节点个数

},

 children : [] //下级子节点对象集合

}