ajax-datasource.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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. </head>
  11. <body>
  12. <div id="chart-container"></div>
  13. <script type="text/javascript" src="js/jquery.min.js"></script>
  14. <script type="text/javascript" src="js/jquery.mockjax.min.js"></script>
  15. <script type="text/javascript" src="js/jquery.orgchart.js"></script>
  16. <script type="text/javascript">
  17. $(function() {
  18. $.mockjax({
  19. url: '/orgchart/initdata',
  20. responseTime: 1000,
  21. contentType: 'application/json',
  22. responseText: {
  23. 'name': 'Lao Lao',
  24. 'title': 'general manager',
  25. 'children': [
  26. { 'name': 'Bo Miao', 'title': 'department manager' },
  27. { 'name': 'Su Miao', 'title': 'department manager',
  28. 'children': [
  29. { 'name': 'Tie Hua', 'title': 'senior engineer' },
  30. { 'name': 'Hei Hei', 'title': 'senior engineer',
  31. 'children': [
  32. { 'name': 'Pang Pang', 'title': 'engineer' },
  33. { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
  34. ]
  35. }
  36. ]
  37. },
  38. { 'name': 'Yu Jie', 'title': 'department manager' },
  39. { 'name': 'Yu Li', 'title': 'department manager' },
  40. { 'name': 'Hong Miao', 'title': 'department manager' },
  41. { 'name': 'Yu Wei', 'title': 'department manager' },
  42. { 'name': 'Chun Miao', 'title': 'department manager' },
  43. { 'name': 'Yu Tie', 'title': 'department manager' }
  44. ]
  45. }
  46. });
  47. $('#chart-container').orgchart({
  48. 'data' : '/orgchart/initdata',
  49. 'nodeContent': 'title'
  50. });
  51. });
  52. </script>
  53. </body>
  54. </html>