orgchart
Version:
Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.
150 lines (140 loc) • 5.13 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Organization Chart Plugin</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/jquery.orgchart.css">
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
.orgchart .node.matched { background-color: rgba(238, 217, 54, 0.5); }
.orgchart .hierarchy.first-shown::before {
left: calc(50% - 1px);
width: calc(50% + 1px);
}
.orgchart .hierarchy.last-shown::before {
width: calc(50% + 1px);
}
.orgchart .hierarchy.first-shown.last-shown::before {
width: 2px;
}
#edit-panel {
text-align: center;
margin: 0.5rem;
padding: 0.5rem;
border: 1px solid #aaa;
}
#edit-panel * { font-size: 1rem; }
button, input { padding: 0.5rem 1rem; }
</style>
</head>
<body>
<div id="chart-container"></div>
<div id="edit-panel" class="view-state">
<input type="text" id="key-word">
<button type="button" id="btn-filter-node">Filter</button>
<button type="button" id="btn-cancel">Cancel</button>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
<script type="text/javascript">
function loopChart ($hierarchy) {
var $siblings = $hierarchy.children('.nodes').children('.hierarchy');
if ($siblings.length) {
$siblings.filter(':not(.hidden)').first().addClass('first-shown')
.end().last().addClass('last-shown');
}
$siblings.each(function(index, sibling) {
loopChart($(sibling));
});
}
function filterNodes(keyWord) {
if(!keyWord.length) {
window.alert('Please type key word firstly.');
return;
} else {
var $chart = $('.orgchart');
// disalbe the expand/collapse feture
$chart.addClass('noncollapsable');
// distinguish the matched nodes and the unmatched nodes according to the given key word
$chart.find('.node').filter(function(index, node) {
return $(node).text().toLowerCase().indexOf(keyWord) > -1;
}).addClass('matched')
.closest('.hierarchy').parents('.hierarchy').children('.node').addClass('retained');
// hide the unmatched nodes
$chart.find('.matched,.retained').each(function(index, node) {
$(node).removeClass('slide-up')
.closest('.nodes').removeClass('hidden')
.siblings('.hierarchy').removeClass('isChildrenCollapsed');
var $unmatched = $(node).closest('.hierarchy').siblings().find('.node:first:not(.matched,.retained)')
.closest('.hierarchy').addClass('hidden');
});
// hide the redundant descendant nodes of the matched nodes
$chart.find('.matched').each(function(index, node) {
if (!$(node).siblings('.nodes').find('.matched').length) {
$(node).siblings('.nodes').addClass('hidden')
.parent().addClass('isChildrenCollapsed');
}
});
// loop chart and adjust lines
loopChart($chart.find('.hierarchy:first'));
}
}
function clearFilterResult() {
$('.orgchart').removeClass('noncollapsable')
.find('.node').removeClass('matched retained')
.end().find('.hidden, .isChildrenCollapsed, .first-shown, .last-shown').removeClass('hidden isChildrenCollapsed first-shown last-shown')
.end().find('.slide-up, .slide-left, .slide-right').removeClass('slide-up slide-right slide-left');
}
$(function() {
var datascource = {
'name': 'Lao Lao',
'title': 'general manager',
'children': [
{ 'name': 'Bo Miao', 'title': 'department manager',
'children': [
{ 'name': 'Li Jing', 'title': 'senior engineer' },
{ 'name': 'Li Xin', 'title': 'senior engineer',
'children': [
{ 'name': 'To To', 'title': 'engineer' },
{ 'name': 'Fei Fei', 'title': 'engineer' },
{ 'name': 'Xuan Xuan', 'title': 'engineer' }
]
}
]
},
{ 'name': 'Su Miao', 'title': 'department manager',
'children': [
{ 'name': 'Pang Pang', 'title': 'senior engineer' },
{ 'name': 'Hei Hei', 'title': 'senior engineer',
'children': [
{ 'name': 'Xiang Xiang', 'title': 'UE engineer' },
{ 'name': 'Dan Dan', 'title': 'engineer' },
{ 'name': 'Zai Zai', 'title': 'engineer' }
]
}
]
}
]
};
$('#chart-container').orgchart({
'data' : datascource,
'nodeContent': 'title'
});
$('#btn-filter-node').on('click', function() {
filterNodes($('#key-word').val());
});
$('#btn-cancel').on('click', function() {
clearFilterResult();
});
$('#key-word').on('keyup', function(event) {
if (event.which === 13) {
filterNodes(this.value);
} else if (event.which === 8 && this.value.length === 0) {
clearFilterResult();
}
});
});
</script>
</body>
</html>