如何在单击事件中获取jQuery拖放的图表树数据

时间:2018-09-21 13:46:41

标签: javascript jquery charts tree drag-and-drop

我正在尝试获取有关JavaScript click事件的数据的重新排序的内容。 有谁知道我如何获得重新排序的更新内容,所以我可以更新数据库中的内容。

我使用下面的JQuery库对组织层次结构树执行拖放操作。

Service Level Agreement for Hosting and Realtime Database

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

有人知道我可以获取更新内容的任何方法吗?

 <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' }
      ]
     };

0 个答案:

没有答案