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

81
example/example.html
View File

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

35
example/jquery.jOrgChart.js
View File

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