Advertisement
Guest User

Org chart child has multiple parents

a guest
Jul 25th, 2018
200
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.28 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Proof of problem</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.     .orgchart { background: #fff; }
  12.     .orgchart td.left, .orgchart td.right, .orgchart td.top { border-color: #aaa; }
  13.     .orgchart td>.down { background-color: #aaa; }
  14.     .orgchart .screen .title { background-color: #006699; }
  15.     .orgchart .screen .content { border-color: #006699; }
  16.     .orgchart .duplicate .content { background-color: #F4FA90; }
  17.   </style>
  18. </head>
  19. <body>
  20.   <div id="chart-container"></div>
  21.  
  22.   <script type="text/javascript" src="js/jquery.min.js"></script>
  23.   <script type="text/javascript" src="js/jquery.orgchart.js"></script>
  24.   <script type="text/javascript">
  25.     $(function() {
  26.  
  27.     var datascource = {
  28.       'name': 'Main',
  29.       'title': '',
  30.       'className': 'screen',
  31.         'children': [
  32.         { 'name': '1', 'title': '', 'className': 'screen',
  33.           'children': [
  34.             { 'name': 'Foo', 'title': '', 'className': 'screen' },
  35.             { 'name': 'Bar', 'title': '', 'className': 'screen duplicate' }
  36.           ]
  37.         },
  38.         { 'name': '2', 'title': '', 'className': 'screen',
  39.           'children': [
  40.             { 'name': 'Woof', 'title': '', 'className': 'screen' }
  41.           ]
  42.         },
  43.         { 'name': '3', 'title': '', 'className': 'screen',
  44.           'children': [
  45.             { 'name': 'Fizz', 'title': '', 'className': 'screen' }
  46.           ]
  47.         },
  48.         { 'name': '4', 'title': '', 'className': 'screen',
  49.           'children': [
  50.             { 'name': 'Buzz', 'title': '', 'className': 'screen' },
  51.             { 'name': 'Bar', 'title': '', 'className': 'screen duplicate' },
  52.             { 'name': 'Ping', 'title': '', 'className': 'screen' }
  53.           ]
  54.         }
  55.       ]
  56.     }
  57.  
  58.     var oc = $('#chart-container').orgchart({
  59.       'data' : datascource,
  60.       'nodeContent': 'title',
  61.       'pan': true,
  62.       'zoom': true
  63.     });
  64.  
  65.     oc.$chartContainer.on('touchmove', function(event) {
  66.       event.preventDefault();
  67.     });
  68.  
  69.   });
  70.   </script>
  71.   </body>
  72. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement