guillaume
/
jOrgChart
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

issue #8: clicking links inside nodes doesn't collapse nodes now.

master
Wes 2012-03-16 14:38:11 +00:00
parent fb6808bd07
commit c27039a9b3
2 changed files with 70 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
example/example.html
View File

@ -4,57 +4,58 @@
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
<link rel="stylesheet" href="css/custom.css"/>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
<!-- jQuery includes -->
<script type="text/javascript" src="prettify.js"></script>
<!-- jQuery includes -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="jquery.jOrgChart.js"></script>
<script>
jQuery(document).ready(function() {
$("#org").jOrgChart({
chartElement : '#chart',
dragAndDrop : true
});
chartElement : '#chart',
dragAndDrop : true
});
});
</script>
</head>
<body onload="prettyPrint();">
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="#">jQuery Organisation Chart</a>
<ul class="nav">
<li><a href="http://github.com/wesnolte">Github</a></li>
<li><a href="http://twitter.com/wesnolte">Twitter</a></li>
<li><a href="http://th3silverlining.com">Blog</a></li>
</ul>
<div class="pull-right">
<div class="alert-message info" id="show-list">Show underlying list.</div>
<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>
</div>
</div>
</div>
</div>
<ul id="org" style="display:none">
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="#">jQuery Organisation Chart</a>
<ul class="nav">
<li><a href="http://github.com/wesnolte">Github</a></li>
<li><a href="http://twitter.com/wesnolte">Twitter</a></li>
<li><a href="http://th3silverlining.com">Blog</a></li>
</ul>
<div class="pull-right">
<div class="alert-message info" id="show-list">Show underlying list.</div>
<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>
</div>
</div>
</div>
</div>
<ul id="org" style="display:none">
<li>
Food
<ul>
<li id="beer">Beer</li>
<li>Vegetables
<a href="http://wesnolte.com" target="_blank">Click me</a>
<ul>
<li>Pumpkin</li>
<li>
<a href="http://tquila.com" target="_blank">Aubergine</a>
<p>A link and paragraph is all we need.</p>
</li>
<a href="http://tquila.com" target="_blank">Aubergine</a>
<p>A link and paragraph is all we need.</p>
</li>
</ul>
</li>
<li class="fruit">Fruit
@ -82,27 +83,27 @@
</li>
</ul>
</li>
</ul>
<div id="chart" class="orgChart"></div>
</ul>
<div id="chart" class="orgChart"></div>
<script>
jQuery(document).ready(function() {
/* Custom jQuery for the example */
$("#show-list").click(function(e){
e.preventDefault();
$('#list-html').toggle('fast', function(){
if($(this).is(':visible')){
$('#show-list').text('Hide underlying list.');
$(".topbar").fadeTo('fast',0.9);
}else{
$('#show-list').text('Show underlying list.');
$(".topbar").fadeTo('fast',1);
}
});
});
/* Custom jQuery for the example */
$("#show-list").click(function(e){
e.preventDefault();
$('#list-html').toggle('fast', function(){
if($(this).is(':visible')){
$('#show-list').text('Hide underlying list.');
$(".topbar").fadeTo('fast',0.9);
}else{
$('#show-list').text('Show underlying list.');
$(".topbar").fadeTo('fast',1);
}
});
});
$('#list-html').text($('#org').html());

35
example/jquery.jOrgChart.js
View File

@ -147,7 +147,6 @@
// Method that recursively builds the tree
function buildNode($node, $appendTo, level, opts) {
var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
var $tbody = $("<tbody/>");
@ -168,7 +167,7 @@
.end()
.html();
var new_node_id = $node.attr("id")
var new_node_id = $node.attr("id");
if (typeof new_node_id !== 'undefined' && new_node_id !== false) {
$nodeDiv = $("<div>").addClass("node").attr("id", $node.attr("id")).append($nodeContent);
}else{
@ -178,20 +177,20 @@
// Expand and contract nodes
if ($childNodes.length > 0) {
$nodeDiv.click(function() {
var $this = $(this);
var $tr = $this.closest("tr");
var $this = $(this);
var $tr = $this.closest("tr");
if($tr.hasClass('contracted')){
$this.css('cursor','n-resize');
$tr.removeClass('contracted').addClass('expanded');
$tr.nextAll("tr").css('visibility', '');
}else{
$this.css('cursor','s-resize');
$tr.removeClass('expanded').addClass('contracted');
$tr.nextAll("tr").css('visibility', 'hidden');
}
});
}
if($tr.hasClass('contracted')){
$this.css('cursor','n-resize');
$tr.removeClass('contracted').addClass('expanded');
$tr.nextAll("tr").css('visibility', '');
}else{
$this.css('cursor','s-resize');
$tr.removeClass('expanded').addClass('contracted');
$tr.nextAll("tr").css('visibility', 'hidden');
}
});
}
$nodeCell.append($nodeDiv);
$nodeRow.append($nodeCell);
@ -259,6 +258,12 @@
$table.append($tbody);
$appendTo.append($table);
/* Prevent trees collapsing if a link inside a node is clicked */
$nodeDiv.children('a').click(function(e){
console.log(e);
e.stopPropagation();
});
};
})(jQuery);