Skip to content

Commit

Permalink
Merge pull request #732 from dabeng/remove-ajaxurl
Browse files Browse the repository at this point in the history 
Remove ajaxurl
  • Loading branch information
@dabeng
dabeng authored Dec 16, 2023
2 parents 5101151 + 8388dae commit 85d145f
Show file tree
Hide file tree
Showing 7 changed files with 136 additions and 159 deletions.
128 changes: 88 additions & 40 deletions demo/ondemand-loading-data.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,55 +17,46 @@
$(function() {

$.mockjax({
url: '/orgchart/children/n3',
url: '/orgchart/ancestors/n1',
contentType: 'application/json',
responseTime: 1000,
responseText: { 'children': [
{ 'id': 'n4', 'name': 'Pang Pang', 'title': 'engineer', 'relationship': '110' },
{ 'id': 'n5', 'name': 'Xiang Xiang', 'title': 'UE engineer', 'relationship': '110'}
]}
});

$.mockjax({
url: '/orgchart/parent/n1',
contentType: 'application/json',
responseTime: 1000,
responseText: { 'id': 'n6','name': 'Lao Lao', 'title': 'general manager', 'relationship': '001' }
responseText: {
'id': 'n0',
'name': 'Lao Lao',
'title': 'general manager', 'relationship': '001',
'children': [
{ 'id': 'n10','name': 'Bo Miao', 'title': 'department engineer', 'relationship': '110' },
{ 'id': 'n11', 'name': 'Yu Jie', 'title': 'department engineer', 'relationship': '110' },
{ 'id': 'n12', 'name': 'Yu Li', 'title': 'department engineer', 'relationship': '110' },
{ 'id': 'n13', 'name': 'Hong Miao', 'title': 'department engineer', 'relationship': '110' },
{ 'id': 'n14', 'name': 'Yu Wei', 'title': 'department engineer', 'relationship': '110' },
{ 'id': 'n15', 'name': 'Chun Miao', 'title': 'department engineer', 'relationship': '110' },
{ 'id': 'n16', 'name': 'Yu Tie', 'title': 'department engineer', 'relationship': '110' }
]
}
});

$.mockjax({
url: '/orgchart/siblings/n1',
url: '/orgchart/descendants/n2',
contentType: 'application/json',
responseTime: 1000,
responseText: { 'siblings': [
{ 'id': '7','name': 'Bo Miao', 'title': 'department engineer', 'relationship': '110' },
{ 'id': '8', 'name': 'Yu Jie', 'title': 'department engineer', 'relationship': '110' },
{ 'id': '9', 'name': 'Yu Li', 'title': 'department engineer', 'relationship': '110' },
{ 'id': '10', 'name': 'Hong Miao', 'title': 'department engineer', 'relationship': '110' },
{ 'id': '11', 'name': 'Yu Wei', 'title': 'department engineer', 'relationship': '110' },
{ 'id': '12', 'name': 'Chun Miao', 'title': 'department engineer', 'relationship': '110' },
{ 'id': '13', 'name': 'Yu Tie', 'title': 'department engineer', 'relationship': '110' }
]}
responseText: [
{ 'id': 'n4', 'name': 'Xiang Xiang', 'title': 'engineer', 'relationship': '110' }
]
});

$.mockjax({
url: '/orgchart/families/n1',
url: '/orgchart/descendants/n3',
contentType: 'application/json',
responseTime: 1000,
responseText: {
'id': 'n6',
'name': 'Lao Lao',
'title': 'general manager',
'relationship': '001',
'children': [
{ 'id': 'n7','name': 'Bo Miao', 'title': 'department engineer', 'relationship': '110' },
{ 'id': 'n8', 'name': 'Yu Jie', 'title': 'department engineer', 'relationship': '110' },
{ 'id': 'n9', 'name': 'Yu Li', 'title': 'department engineer', 'relationship': '110' },
{ 'id': 'n10', 'name': 'Hong Miao', 'title': 'department engineer', 'relationship': '110' },
{ 'id': 'n11', 'name': 'Yu Wei', 'title': 'department engineer', 'relationship': '110' },
{ 'id': 'n12', 'name': 'Chun Miao', 'title': 'department engineer', 'relationship': '110' },
{ 'id': 'n13', 'name': 'Yu Tie', 'title': 'department engineer', 'relationship': '110' }
]}
responseText: [
{ 'id': 'n5', 'name': 'Pang Pang', 'title': 'engineer', 'relationship': '111',
'children': [
{ 'id': 'n6', 'name': 'Er Dan', 'title': 'UE engineer', 'relationship': '110'}
]
},
{ 'id': 'n7', 'name': 'Dan Dan', 'title': 'engineer', 'relationship': '110' }
]
});

var datascource = {
Expand All @@ -74,7 +65,7 @@
'title': 'department manager',
'relationship': '111',
'children': [
{ 'id': 'n2','name': 'Tie Hua', 'title': 'senior engineer', 'relationship': '110' },
{ 'id': 'n2','name': 'Tie Hua', 'title': 'senior engineer', 'relationship': '111' },
{ 'id': 'n3','name': 'Hei Hei', 'title': 'senior engineer', 'relationship': '111' }
]
};
Expand All @@ -90,13 +81,70 @@
}
};

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

oc.$chart.on('click', '.topEdge, .horizontalEdge', function(e) {
var $chart = oc.$chart;
var $topEdge = $(e.target);
var $node = $topEdge.parent();
var parentState = oc.getNodeState($node, 'parent');
if (!parentState.exist) {
if (!($chart.data('inAjax') === true)) {
$topEdge.addClass('hidden');
$node.append(`<i class="oci oci-spinner spinner"></i>`)
$node.children().not('.spinner').css('opacity', 0.2);
$chart.data('inAjax', true);

$.ajax({
'url': '/orgchart/ancestors/' + $node.data('nodeData').id,
'dataType': 'json'
})
.done(function(data, textStatus, jqXHR) {
oc.addAncestors(data, 'n0');
})
.always(function() {
$topEdge.removeClass('hidden');
$node.children('.spinner').remove();
$node.children().removeAttr('style');
$chart.data('inAjax', false);
});
}
}
});

oc.$chart.on('click', '.bottomEdge', function(e) {
var $chart = oc.$chart;
var $bottomEdge = $(e.target);
var $node = $bottomEdge.parent();
var childrenState = oc.getNodeState($node, 'children');
if (!childrenState.exist) {
if (!($chart.data('inAjax') === true)) {
$bottomEdge.addClass('hidden');
$node.append(`<i class="oci oci-spinner spinner"></i>`)
$node.children().not('.spinner').css('opacity', 0.2);
$chart.data('inAjax', true);

$.ajax({
'url': '/orgchart/descendants/' + $node.data('nodeData').id,
'dataType': 'json'
})
.done(function(data, textStatus, jqXHR) {
oc.addDescendants(data, $node);
})
.always(function() {
$bottomEdge.removeClass('hidden');
$node.children('.spinner').remove();
$node.children().removeAttr('style');
$chart.data('inAjax', false);
});
}
}
});

});
</script>
</body>
Expand Down
73 changes: 18 additions & 55 deletions dist/js/jquery.orgchart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,11 @@
if (data instanceof $) { // ul datasource
this.buildHierarchy($root, this.buildJsonDS(data.children()), 0, this.options);
} else { // local json datasource
this.buildHierarchy($root, this.options.ajaxURL ? data : this.attachRel(data, '00'));
if (data.relationship) {
this.buildHierarchy($root, data);
} else {
this.buildHierarchy($root, this.attachRel(data, '00'));
}
}

$chartContainer.append($chart);
Expand Down Expand Up @@ -136,10 +140,6 @@
});
mo.observe(this.$chartContainer[0], { childList: true });
},
triggerLoadEvent: function ($target, rel) {
var initEvent = $.Event('load-' + rel +'.orgchart');
$target.trigger(initEvent);
},
triggerShowEvent: function ($target, rel) {
var initEvent = $.Event('show-' + rel + '.orgchart');
$target.trigger(initEvent);
Expand Down Expand Up @@ -831,32 +831,20 @@
this.$chart.find('.focused').removeClass('focused');
$(event.delegateTarget).addClass('focused');
},
// load new nodes by ajax
loadNodes: function (rel, url, $edge) {
addAncestors: function (data, parentId) {
var $root = this.$chart.children('.nodes').children('.hierarchy');
this.buildHierarchy($root, data);
$root.children().slice(0, 2)
.wrapAll('<li class="hierarchy"></li>').parent()
.appendTo($('#' + parentId).siblings('.nodes'));
},
addDescendants:function (data, $parent) {
var that = this;
var opts = this.options;
$.ajax({ 'url': url, 'dataType': 'json' })
.done(function (data) {
if (that.$chart.data('inAjax')) {
if (rel === 'parent') {
if (!$.isEmptyObject(data)) {
that.addParent($edge.parent(), data);
}
} else if (rel === 'children') {
if (data.children.length) {
that.addChildren($edge.parent(), data[rel]);
}
} else {
that.addSiblings($edge.parent(), data.siblings ? data.siblings : data);
}
that.triggerLoadEvent($edge.parent(), rel);
}
})
.fail(function () {
console.log('Failed to get ' + rel + ' data');
})
.always(function () {
that.endLoading($edge);
var $descendants = $('<ul class="nodes"></ul>');
$parent.after($descendants);
$.each(data, function (i) {
$descendants.append($('<li class="hierarchy"></li>'));
that.buildHierarchy($descendants.children().eq(i), this);
});
},
//
Expand All @@ -870,7 +858,6 @@
},
// actions on clinking top edge of a node
topEdgeClickHandler: function (event) {
event.stopPropagation();
var that = this;
var $topEdge = $(event.target);
var $node = $(event.delegateTarget);
Expand All @@ -887,18 +874,10 @@
this.showParent($node);
this.triggerShowEvent($node, 'parent');
}
} else { // load the new parent node of the specified node by ajax request
// start up loading status
if (this.startLoading($topEdge)) {
var opts = this.options;
var url = $.isFunction(opts.ajaxURL.parent) ? opts.ajaxURL.parent($node.data('nodeData')) : opts.ajaxURL.parent + $node[0].id;
this.loadNodes('parent', url, $topEdge);
}
}
},
// actions on clinking bottom edge of a node
bottomEdgeClickHandler: function (event) {
event.stopPropagation();
var $bottomEdge = $(event.target);
var $node = $(event.delegateTarget);
var childrenState = this.getNodeState($node, 'children');
Expand All @@ -913,17 +892,10 @@
this.showChildren($node);
this.triggerShowEvent($node, 'children');
}
} else { // load the new children nodes of the specified node by ajax request
if (this.startLoading($bottomEdge)) {
var opts = this.options;
var url = $.isFunction(opts.ajaxURL.children) ? opts.ajaxURL.children($node.data('nodeData')) : opts.ajaxURL.children + $node[0].id;
this.loadNodes('children', url, $bottomEdge);
}
}
},
// actions on clicking horizontal edges
hEdgeClickHandler: function (event) {
event.stopPropagation();
var $hEdge = $(event.target);
var $node = $(event.delegateTarget);
var opts = this.options;
Expand Down Expand Up @@ -960,15 +932,6 @@
this.triggerShowEvent($node, 'siblings');
}
}
} else {
// load the new sibling nodes of the specified node by ajax request
if (this.startLoading($hEdge)) {
var nodeId = $node[0].id;
var url = (this.getNodeState($node, 'parent').exist) ?
($.isFunction(opts.ajaxURL.siblings) ? opts.ajaxURL.siblings($node.data('nodeData')) : opts.ajaxURL.siblings + nodeId) :
($.isFunction(opts.ajaxURL.families) ? opts.ajaxURL.families($node.data('nodeData')) : opts.ajaxURL.families + nodeId);
this.loadNodes('siblings', url, $hEdge);
}
}
},
// show the compact node's children in the compact mode
Expand Down
2 changes: 1 addition & 1 deletion dist/js/jquery.orgchart.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/jquery.orgchart.min.js.map
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 85d145f

Please sign in to comment.