jQuery組織結構圖表外掛OrgChart

js程式碼

;
<腳本類型=“text/javascript”src=“js/html2canvas.js”></script>
<腳本類型=“text/javascript”src=“js/jquery.orgchart.js”>
<腳本類型=“text/javascript”>
'使用嚴格'；
（函數（$）{
  $(函數() {
var 資料來源 = {
'name': '姥姥',
'title': '總經理',
'關係'：{ 'children_num'：8 }，
'孩子'： [
{ 'name': '苗波', 'title': '部門經理', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'name': '蘇淼', 'title': '部門經理', '關係': { 'children_num': 2, 'parent_num': 1,'sibling_num': 7 },
'孩子'： [
{ 'name': '鐵花', '職稱': '高級工程師', '關係': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }},
{ 'name': '嘿嘿', '職稱': '高級工程師', '關係': { 'children_num': 2, 'parent_num': 1,'sibling_num': 1 },
'孩子'： [
{ 'name': '龐龐', '職稱': '工程師', '關係': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }},
{ 'name': '翔翔', 'title': 'UE工程師', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }}
]
}
]
},
{ 'name': '餘傑', 'title': '部門經理', '關係': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'name': '於麗', 'title': '部門經理', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'name': '紅淼', 'title': '部門經理', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'name': '於偉', 'title': '部門經理', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'name': '春苗', 'title': '部門經理', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'name': '於鐵', 'title': '部門經理', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }}
]
};

$('#chart-container').orgchart({
'資料'：資料來源，
「深度」：2，
'nodeTitle': '名稱',
'節點內容'：'標題'
});

  });

})(jQuery);
</劇本>

jQuery 組織結構圖表插件OrgChart 組織結構佈局程式碼是一款可以使用本地數據，或透過ajax呼叫來完成數據的填充。