我正在尝试获取有关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' }
]
};