01.<!DOCTYPE html>
02.<html>
03.<head>
04. <title>OrgChart Example</title>
05. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
06.
07. <link href="jquery.orgchart.css" media="all" rel="stylesheet" type="text/css" />
08.<style type="text/css">
09.#orgChart{
10. width: auto;
11. height: auto;
12.}
13.
14.#orgChartContainer{
15. width: 1000px;
16. height: 500px;
17. overflow: auto;
18. background: #eeeeee;
19.}
20.
21. </style>
22.</head>
23.<body>
24. <div id="orgChartContainer">
25. <div id="orgChart"></div>
26. </div>
27. <div id="consoleOutput">
28. </div>
29. <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
30. <script type="text/javascript" src="jquery.orgchart.js"></script>
31. <script type="text/javascript">
32. var testData = [
33. {id: 1, name: 'Acme Organization', parent: 0},
34. {id: 2, name: 'CEO Office', parent: 1},
35. {id: 3, name: 'Division 1', parent: 1},
36. {id: 4, name: 'Division 2', parent: 1},
37. {id: 6, name: 'Division 3', parent: 1},
38. {id: 7, name: 'Division 4', parent: 1},
39. {id: 8, name: 'Division 5', parent: 1},
40. {id: 5, name: 'Sub Division', parent: 3},
41. ];
42. $(function(){
43. org_chart = $('#orgChart').orgChart({
44. data: testData,
45. showControls: true,
46. allowEdit: false,
47. onClickNode: function(node){
48. log('Clicked node '+node.data.id);
49. }
50.
51. });
52. });
53.
54.
55. function log(text){
56. $('#consoleOutput').append('<p>'+text+'</p>')
57. }
58. </script>
59.</body>
60.</html>
