Как получить Jquery drag & drop Данные дерева диаграмм по событию клика - PullRequest
Новая
       15

Как получить Jquery drag & drop Данные дерева диаграмм по событию клика

0 голосов
/ 21 сентября 2018

Я пытаюсь получить переупорядоченное содержимое данных в событии щелчка JavaScript.Кто-нибудь знает, как я могу переупорядочить обновленное содержимое, чтобы я мог обновить это содержимое в базе данных.

Использую библиотеку JQuery ниже для выполнения операции перетаскивания в дереве иерархии организации.

https://github.com/dabeng/OrgChart/blob/master/demo/js/jquery.orgchart.js

https://jsfiddle.net/dabeng/vfjtyac7/

Кто-нибудь знает какой-либо метод, где я могу получить обновленный контент? 

 <div id="chart-container"></div>
 <button class="button" id="btn-export-hier" onclick="updateHierarchy()">Update</button>

 <script type="text/javascript" src="<?php echo SITEURL_ASSETS_PLUGINS.'/jqueryOrgnizationChart/jquery.orgchart.js'; ?>"></script>
<script type="text/javascript">
    $(function() {

        var emp = $('#empRecords').val();
        let imagePath = "<?php echo SITEURL . '/application/uploads/user/'; ?>";
        responseJStringfy = JSON.parse( emp );

        var ds = {};
        for( let groupConfigID in responseJStringfy ) {        
            ds.name = responseJStringfy["name"];
            ds.title = responseJStringfy['title'];
            if(responseJStringfy[groupConfigID] != '' ) {
            ds.children = responseJStringfy[groupConfigID];
            }
        }

        var oc = $('#chart-container').orgchart({
          'data' : ds,
          'nodeContent': 'title',
          'draggable': true,
          'dropCriteria': function($draggedNode, $dragZone, $dropZone) {
        if($draggedNode.find('.content').text().indexOf('manager') > -1 && $dropZone.find('.content').text().indexOf('engineer') > -1) {
          return false;
        }
        return true;
      }
    });

    oc.$chart.on('nodedrop.orgchart', function(event, extraParams) {
      console.log('draggedNode:' + extraParams.draggedNode.children('.title').text()
        + ', dragZone:' + extraParams.dragZone.children('.title').text()
        + ', dropZone:' + extraParams.dropZone.children('.title').text()
      );
    });

    $('#btn-export-hier').on('click', function() {
        if (!$('pre').length) {
            var hierarchy = oc.getHierarchy();
            console.log(hierarchy);
            console.log(JSON.stringify(hierarchy));
            // $('#btn-export-hier').after('<pre>').next().append(JSON.stringify(hierarchy, null, 2));
        }
    });

});

function updateHierarchy() {
    console.log('clicked'); 
}

Мой ожидаемый результат после выполнения операции перетаскивания на дереве, мы должны получить обновленный объект JSON, например, 

     var ds = {
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
       { 'name': 'Bo Miao', 'title': 'department manager' },
       { 'name': 'Su Miao', 'title': 'department manager',
         'children': [
           { 'name': 'Tie Hua', 'title': 'senior engineer' },
           { 'name': 'Hei Hei', 'title': 'senior engineer' }
          ]
        },
         { 'name': 'Hong Miao', 'title': 'department manager' },
        { 'name': 'Chun Miao', 'title': 'department manager' }
      ]
     };
...