Skip to content

Commit 85d145f

Browse files
dabengdabeng
authored
Merge pull request #732 from dabeng/remove-ajaxurl
Remove ajaxurl
2 parents 5101151 + 8388dae commit 85d145f

File tree

7 files changed

+136
-159
lines changed

7 files changed

+136
-159
lines changed

‎demo/ondemand-loading-data.html‎

Lines changed: 88 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -17,55 +17,46 @@
1717
$(function() {
1818

1919
$.mockjax({
20-
url: '/orgchart/children/n3',
20+
url: '/orgchart/ancestors/n1',
2121
contentType: 'application/json',
2222
responseTime: 1000,
23-
responseText: { 'children': [
24-
{ 'id': 'n4', 'name': 'Pang Pang', 'title': 'engineer', 'relationship': '110' },
25-
{ 'id': 'n5', 'name': 'Xiang Xiang', 'title': 'UE engineer', 'relationship': '110'}
26-
]}
27-
});
28-
29-
$.mockjax({
30-
url: '/orgchart/parent/n1',
31-
contentType: 'application/json',
32-
responseTime: 1000,
33-
responseText: { 'id': 'n6','name': 'Lao Lao', 'title': 'general manager', 'relationship': '001' }
23+
responseText: {
24+
'id': 'n0',
25+
'name': 'Lao Lao',
26+
'title': 'general manager', 'relationship': '001',
27+
'children': [
28+
{ 'id': 'n10','name': 'Bo Miao', 'title': 'department engineer', 'relationship': '110' },
29+
{ 'id': 'n11', 'name': 'Yu Jie', 'title': 'department engineer', 'relationship': '110' },
30+
{ 'id': 'n12', 'name': 'Yu Li', 'title': 'department engineer', 'relationship': '110' },
31+
{ 'id': 'n13', 'name': 'Hong Miao', 'title': 'department engineer', 'relationship': '110' },
32+
{ 'id': 'n14', 'name': 'Yu Wei', 'title': 'department engineer', 'relationship': '110' },
33+
{ 'id': 'n15', 'name': 'Chun Miao', 'title': 'department engineer', 'relationship': '110' },
34+
{ 'id': 'n16', 'name': 'Yu Tie', 'title': 'department engineer', 'relationship': '110' }
35+
]
36+
}
3437
});
3538

3639
$.mockjax({
37-
url: '/orgchart/siblings/n1',
40+
url: '/orgchart/descendants/n2',
3841
contentType: 'application/json',
3942
responseTime: 1000,
40-
responseText: { 'siblings': [
41-
{ 'id': '7','name': 'Bo Miao', 'title': 'department engineer', 'relationship': '110' },
42-
{ 'id': '8', 'name': 'Yu Jie', 'title': 'department engineer', 'relationship': '110' },
43-
{ 'id': '9', 'name': 'Yu Li', 'title': 'department engineer', 'relationship': '110' },
44-
{ 'id': '10', 'name': 'Hong Miao', 'title': 'department engineer', 'relationship': '110' },
45-
{ 'id': '11', 'name': 'Yu Wei', 'title': 'department engineer', 'relationship': '110' },
46-
{ 'id': '12', 'name': 'Chun Miao', 'title': 'department engineer', 'relationship': '110' },
47-
{ 'id': '13', 'name': 'Yu Tie', 'title': 'department engineer', 'relationship': '110' }
48-
]}
43+
responseText: [
44+
{ 'id': 'n4', 'name': 'Xiang Xiang', 'title': 'engineer', 'relationship': '110' }
45+
]
4946
});
5047

5148
$.mockjax({
52-
url: '/orgchart/families/n1',
49+
url: '/orgchart/descendants/n3',
5350
contentType: 'application/json',
5451
responseTime: 1000,
55-
responseText: {
56-
'id': 'n6',
57-
'name': 'Lao Lao',
58-
'title': 'general manager',
59-
'relationship': '001',
60-
'children': [
61-
{ 'id': 'n7','name': 'Bo Miao', 'title': 'department engineer', 'relationship': '110' },
62-
{ 'id': 'n8', 'name': 'Yu Jie', 'title': 'department engineer', 'relationship': '110' },
63-
{ 'id': 'n9', 'name': 'Yu Li', 'title': 'department engineer', 'relationship': '110' },
64-
{ 'id': 'n10', 'name': 'Hong Miao', 'title': 'department engineer', 'relationship': '110' },
65-
{ 'id': 'n11', 'name': 'Yu Wei', 'title': 'department engineer', 'relationship': '110' },
66-
{ 'id': 'n12', 'name': 'Chun Miao', 'title': 'department engineer', 'relationship': '110' },
67-
{ 'id': 'n13', 'name': 'Yu Tie', 'title': 'department engineer', 'relationship': '110' }
68-
]}
52+
responseText: [
53+
{ 'id': 'n5', 'name': 'Pang Pang', 'title': 'engineer', 'relationship': '111',
54+
'children': [
55+
{ 'id': 'n6', 'name': 'Er Dan', 'title': 'UE engineer', 'relationship': '110'}
56+
]
57+
},
58+
{ 'id': 'n7', 'name': 'Dan Dan', 'title': 'engineer', 'relationship': '110' }
59+
]
6960
});
7061

7162
var datascource = {
@@ -74,7 +65,7 @@
7465
'title': 'department manager',
7566
'relationship': '111',
7667
'children': [
77-
{ 'id': 'n2','name': 'Tie Hua', 'title': 'senior engineer', 'relationship': '110' },
68+
{ 'id': 'n2','name': 'Tie Hua', 'title': 'senior engineer', 'relationship': '111' },
7869
{ 'id': 'n3','name': 'Hei Hei', 'title': 'senior engineer', 'relationship': '111' }
7970
]
8071
};
@@ -90,13 +81,70 @@
9081
}
9182
};
9283

93-
$('#chart-container').orgchart({
84+
var oc = $('#chart-container').orgchart({
9485
'data' : datascource,
95-
'ajaxURL': ajaxURLs,
9686
'nodeContent': 'title',
9787
'nodeId': 'id'
9888
});
9989

90+
oc.$chart.on('click', '.topEdge, .horizontalEdge', function(e) {
91+
var $chart = oc.$chart;
92+
var $topEdge = $(e.target);
93+
var $node = $topEdge.parent();
94+
var parentState = oc.getNodeState($node, 'parent');
95+
if (!parentState.exist) {
96+
if (!($chart.data('inAjax') === true)) {
97+
$topEdge.addClass('hidden');
98+
$node.append(`<i class="oci oci-spinner spinner"></i>`)
99+
$node.children().not('.spinner').css('opacity', 0.2);
100+
$chart.data('inAjax', true);
101+
102+
$.ajax({
103+
'url': '/orgchart/ancestors/' + $node.data('nodeData').id,
104+
'dataType': 'json'
105+
})
106+
.done(function(data, textStatus, jqXHR) {
107+
oc.addAncestors(data, 'n0');
108+
})
109+
.always(function() {
110+
$topEdge.removeClass('hidden');
111+
$node.children('.spinner').remove();
112+
$node.children().removeAttr('style');
113+
$chart.data('inAjax', false);
114+
});
115+
}
116+
}
117+
});
118+
119+
oc.$chart.on('click', '.bottomEdge', function(e) {
120+
var $chart = oc.$chart;
121+
var $bottomEdge = $(e.target);
122+
var $node = $bottomEdge.parent();
123+
var childrenState = oc.getNodeState($node, 'children');
124+
if (!childrenState.exist) {
125+
if (!($chart.data('inAjax') === true)) {
126+
$bottomEdge.addClass('hidden');
127+
$node.append(`<i class="oci oci-spinner spinner"></i>`)
128+
$node.children().not('.spinner').css('opacity', 0.2);
129+
$chart.data('inAjax', true);
130+
131+
$.ajax({
132+
'url': '/orgchart/descendants/' + $node.data('nodeData').id,
133+
'dataType': 'json'
134+
})
135+
.done(function(data, textStatus, jqXHR) {
136+
oc.addDescendants(data, $node);
137+
})
138+
.always(function() {
139+
$bottomEdge.removeClass('hidden');
140+
$node.children('.spinner').remove();
141+
$node.children().removeAttr('style');
142+
$chart.data('inAjax', false);
143+
});
144+
}
145+
}
146+
});
147+
100148
});
101149
</script>
102150
</body>

‎dist/js/jquery.orgchart.js‎

Lines changed: 18 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,11 @@
8080
if (data instanceof $) { // ul datasource
8181
this.buildHierarchy($root, this.buildJsonDS(data.children()), 0, this.options);
8282
} else { // local json datasource
83-
this.buildHierarchy($root, this.options.ajaxURL ? data : this.attachRel(data, '00'));
83+
if (data.relationship) {
84+
this.buildHierarchy($root, data);
85+
} else {
86+
this.buildHierarchy($root, this.attachRel(data, '00'));
87+
}
8488
}
8589

8690
$chartContainer.append($chart);
@@ -136,10 +140,6 @@
136140
});
137141
mo.observe(this.$chartContainer[0], { childList: true });
138142
},
139-
triggerLoadEvent: function ($target, rel) {
140-
var initEvent = $.Event('load-' + rel +'.orgchart');
141-
$target.trigger(initEvent);
142-
},
143143
triggerShowEvent: function ($target, rel) {
144144
var initEvent = $.Event('show-' + rel + '.orgchart');
145145
$target.trigger(initEvent);
@@ -831,32 +831,20 @@
831831
this.$chart.find('.focused').removeClass('focused');
832832
$(event.delegateTarget).addClass('focused');
833833
},
834-
// load new nodes by ajax
835-
loadNodes: function (rel, url, $edge) {
834+
addAncestors: function (data, parentId) {
835+
var $root = this.$chart.children('.nodes').children('.hierarchy');
836+
this.buildHierarchy($root, data);
837+
$root.children().slice(0, 2)
838+
.wrapAll('<li class="hierarchy"></li>').parent()
839+
.appendTo($('#' + parentId).siblings('.nodes'));
840+
},
841+
addDescendants:function (data, $parent) {
836842
var that = this;
837-
var opts = this.options;
838-
$.ajax({ 'url': url, 'dataType': 'json' })
839-
.done(function (data) {
840-
if (that.$chart.data('inAjax')) {
841-
if (rel === 'parent') {
842-
if (!$.isEmptyObject(data)) {
843-
that.addParent($edge.parent(), data);
844-
}
845-
} else if (rel === 'children') {
846-
if (data.children.length) {
847-
that.addChildren($edge.parent(), data[rel]);
848-
}
849-
} else {
850-
that.addSiblings($edge.parent(), data.siblings ? data.siblings : data);
851-
}
852-
that.triggerLoadEvent($edge.parent(), rel);
853-
}
854-
})
855-
.fail(function () {
856-
console.log('Failed to get ' + rel + ' data');
857-
})
858-
.always(function () {
859-
that.endLoading($edge);
843+
var $descendants = $('<ul class="nodes"></ul>');
844+
$parent.after($descendants);
845+
$.each(data, function (i) {
846+
$descendants.append($('<li class="hierarchy"></li>'));
847+
that.buildHierarchy($descendants.children().eq(i), this);
860848
});
861849
},
862850
//
@@ -870,7 +858,6 @@
870858
},
871859
// actions on clinking top edge of a node
872860
topEdgeClickHandler: function (event) {
873-
event.stopPropagation();
874861
var that = this;
875862
var $topEdge = $(event.target);
876863
var $node = $(event.delegateTarget);
@@ -887,18 +874,10 @@
887874
this.showParent($node);
888875
this.triggerShowEvent($node, 'parent');
889876
}
890-
} else { // load the new parent node of the specified node by ajax request
891-
// start up loading status
892-
if (this.startLoading($topEdge)) {
893-
var opts = this.options;
894-
var url = $.isFunction(opts.ajaxURL.parent) ? opts.ajaxURL.parent($node.data('nodeData')) : opts.ajaxURL.parent + $node[0].id;
895-
this.loadNodes('parent', url, $topEdge);
896-
}
897877
}
898878
},
899879
// actions on clinking bottom edge of a node
900880
bottomEdgeClickHandler: function (event) {
901-
event.stopPropagation();
902881
var $bottomEdge = $(event.target);
903882
var $node = $(event.delegateTarget);
904883
var childrenState = this.getNodeState($node, 'children');
@@ -913,17 +892,10 @@
913892
this.showChildren($node);
914893
this.triggerShowEvent($node, 'children');
915894
}
916-
} else { // load the new children nodes of the specified node by ajax request
917-
if (this.startLoading($bottomEdge)) {
918-
var opts = this.options;
919-
var url = $.isFunction(opts.ajaxURL.children) ? opts.ajaxURL.children($node.data('nodeData')) : opts.ajaxURL.children + $node[0].id;
920-
this.loadNodes('children', url, $bottomEdge);
921-
}
922895
}
923896
},
924897
// actions on clicking horizontal edges
925898
hEdgeClickHandler: function (event) {
926-
event.stopPropagation();
927899
var $hEdge = $(event.target);
928900
var $node = $(event.delegateTarget);
929901
var opts = this.options;
@@ -960,15 +932,6 @@
960932
this.triggerShowEvent($node, 'siblings');
961933
}
962934
}
963-
} else {
964-
// load the new sibling nodes of the specified node by ajax request
965-
if (this.startLoading($hEdge)) {
966-
var nodeId = $node[0].id;
967-
var url = (this.getNodeState($node, 'parent').exist) ?
968-
($.isFunction(opts.ajaxURL.siblings) ? opts.ajaxURL.siblings($node.data('nodeData')) : opts.ajaxURL.siblings + nodeId) :
969-
($.isFunction(opts.ajaxURL.families) ? opts.ajaxURL.families($node.data('nodeData')) : opts.ajaxURL.families + nodeId);
970-
this.loadNodes('siblings', url, $hEdge);
971-
}
972935
}
973936
},
974937
// show the compact node's children in the compact mode

‎dist/js/jquery.orgchart.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/jquery.orgchart.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)