vertical-level.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Organization Chart Plugin</title>
  6. <link rel="icon" href="img/logo.png">
  7. <link rel="stylesheet" href="css/font-awesome.min.css">
  8. <link rel="stylesheet" href="css/jquery.orgchart.css">
  9. <link rel="stylesheet" href="css/style.css">
  10. <style type="text/css">
  11. #chart-container { height: 620px; }
  12. .orgchart { background: white; }
  13. </style>
  14. </head>
  15. <body>
  16. <div id="chart-container"></div>
  17. <script type="text/javascript" src="js/jquery.min.js"></script>
  18. <script type="text/javascript" src="js/jquery.orgchart.js"></script>
  19. <script type="text/javascript">
  20. $(function() {
  21. var datascource = {
  22. 'name': 'Lao Lao',
  23. 'title': 'general manager',
  24. 'children': [
  25. { 'name': 'Bo Miao', 'title': 'department manager' },
  26. { 'name': 'Su Miao', 'title': 'department manager',
  27. 'children': [
  28. { 'name': 'Tie Hua', 'title': 'senior engineer' },
  29. { 'name': 'Hei Hei', 'title': 'senior engineer',
  30. 'children': [
  31. { 'name': 'Pang Pang', 'title': 'engineer' },
  32. { 'name': 'Dan Dan', 'title': 'UE engineer' ,
  33. 'children': [
  34. { 'name': 'Er Dan', 'title': 'engineer' },
  35. { 'name': 'San Dan', 'title': 'engineer',
  36. 'children': [
  37. { 'name': 'Si Dan', 'title': 'intern' },
  38. { 'name': 'Wu Dan', 'title': 'intern' }
  39. ]
  40. }
  41. ]}
  42. ]
  43. }
  44. ]
  45. },
  46. { 'name': 'Hong Miao', 'title': 'department manager' },
  47. { 'name': 'Chun Miao', 'title': 'department manager',
  48. 'children': [
  49. { 'name': 'Bing Qin', 'title': 'senior engineer' },
  50. { 'name': 'Yue Yue', 'title': 'senior engineer',
  51. 'children': [
  52. { 'name': 'Er Yue', 'title': 'engineer' },
  53. { 'name': 'San Yue', 'title': 'UE engineer' }
  54. ]
  55. }
  56. ]
  57. }
  58. ]
  59. };
  60. $('#chart-container').orgchart({
  61. 'data' : datascource,
  62. 'nodeContent': 'title',
  63. 'verticalLevel': 3,
  64. 'visibleLevel': 4
  65. });
  66. });
  67. </script>
  68. </body>
  69. </html>