Shwasher
/
ShWasher


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Organization Chart Plugin</title>
  <link rel="icon" href="img/logo.png">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/jquery.orgchart.css">
  <link rel="stylesheet" href="css/style.css">
  <style type="text/css">
    #edit-panel {
      text-align: center;
      position: relative;
      left: 10px;
      width: calc(100% - 40px);
      border-radius: 4px;
      float: left;
      margin-top: 10px;
      padding: 10px;
      color: #fff;
      background-color: #449d44;
    }
    #edit-panel * { font-size: 20px; }
  </style>
</head>
<body>
  <div id="chart-container"></div>
  <div id="edit-panel" class="view-state">
    <input type="text" id="selected-node" placeholder="please select node" readonly="true">
    <button type="button" id="btn-report-path">draw report path</button>
    <button type="button" id="btn-reset">reset</button>
  </div>

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.orgchart.js"></script>
  <script type="text/javascript">
    $(function() {

    var datascource = {
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'name': 'Bo Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Li Jing', 'title': 'senior engineer' },
            { 'name': 'Li Xin', 'title': 'senior engineer',
              'children': [
                { 'name': 'To To', 'title': 'engineer' },
                { 'name': 'Fei Fei', 'title': 'engineer' },
                { 'name': 'Xuan Xuan', 'title': 'engineer' }
              ]
            }
          ]
        },
        { 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Pang Pang', 'title': 'senior engineer' },
            { 'name': 'Hei Hei', 'title': 'senior engineer',
              'children': [
                { 'name': 'Xiang Xiang', 'title': 'UE engineer' },
                { 'name': 'Dan Dan', 'title': 'engineer' },
                { 'name': 'Zai Zai', 'title': 'engineer' }
              ]
            }
          ]
        }
      ]
    };

    var oc = $('#chart-container').orgchart({
      'data' : datascource,
      'nodeContent': 'title'
    });

    oc.$chart.find('.node').on('click', function() {
      $('#selected-node').val($(this).children('.title').text());
    });

    $('#btn-report-path').on('click', function() {
      var $selected = $('#chart-container').find('.node.focused');
      if ($selected.length) {
        $selected.parents('.nodes').children(':has(.focused)').find('.node:first').each(function(index, superior) {
          if (!$(superior).find('.horizontalEdge:first').closest('table').parent().siblings().is('.hidden')) {
            $(superior).find('.horizontalEdge:first').trigger('click');
          }
        });
        $(this).prop('disabled', true);
      } else {
        alert('please select the node firstly');
      }
    });

    $('#btn-reset').on('click', function() {
      $('#chart-container').find('.hidden').removeClass('hidden')
        .end().find('.slide-up, .slide-right, .slide-left, .focused').removeClass('slide-up slide-right slide-left focused');
      $('#btn-report-path').prop('disabled', false);
      $('#selected-node').val('');
    });

  });
  </script>
  </body>
</html>