jQuery組織図プラグインOrgChart

js 代

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
<スクリプトタイプ="text/javascript">
'厳密を使用';
(関数($){
  $(関数() {
var データソース = {
'名前': 'ラオラオ',
'役職': 'ゼネラルマネージャー',
'関係': { 'children_num': 8 },
'子供たち'： [
{ '名前': 'ボー・ミャオ', '役職': '部長', '関係': { 'children_num': 0, 'parent_num': 1, 'sibling_num': 7 }},
{ '名前': '蘇ミャオ', '役職': '部長', '関係': { 'children_num': 2, 'parent_num': 1, 'sibling_num': 7 },
'子供たち'： [
{ 'name': 'Tie Hua', 'title': 'シニアエンジニア', 'relationship': { 'children_num': 0, 'parent_num': 1, 'sibling_num': 1 }},
{ '名前': 'ヘイヘイ', '役職': 'シニアエンジニア', '関係': { 'children_num': 2, 'parent_num': 1, 'sibling_num': 1 },
'子供たち'： [
{ '名前': 'パンパン', '役職': 'エンジニア', '関係': { 'children_num': 0, 'parent_num': 1, 'sibling_num': 1 }},
{ '名前': 'シャンシャン', '役職': 'UE エンジニア', '関係': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }}
]
}
]
}、
{ '名前': 'Yu Jie', '役職': '部長', '関係': { 'children_num': 0, 'parent_num': 1, 'sibling_num': 7 }},
{ 'name': 'Yu Li', 'title': '部門マネージャー', 'relationship': { 'children_num': 0, 'parent_num': 1, 'sibling_num': 7 }},
{ 'name': 'Hong Miao', 'title': '部門マネージャー', 'relationship': { 'children_num': 0, 'parent_num': 1, 'sibling_num': 7 }},
{ 'name': 'Yu Wei', 'title': '部門マネージャー', 'relationship': { 'children_num': 0, 'parent_num': 1, 'sibling_num': 7 }},
{ '名前': '春苗', '役職': '部長', '関係': { '子の数': 0, '親の数': 1, '兄弟の数': 7 }},
{ 'name': 'Yu Tie', 'title': '部長', 'relationship': { 'children_num': 0, 'parent_num': 1, 'sibling_num': 7 }}
]
};

$('#chart-container').orgchart({
'データ' : データソース、
「深さ」: 2、
'nodeTitle': '名前',
'nodeContent': 'タイトル'
});

  });

})(jQuery);
</script>

jQuery 構造図表ファイル OrgChart 構造配置コードは、独自のデータを使用するか、ajax を使用してデータの充填を実行することができます。