I am currently using dynaTree jQuery plugin to render a tree.
<div id="tree" style="height:100px;">
<ul class="expanded">
<li class="expanded" id="shtml_1" >
<a class="ajaxify" href="jsTree.html" >Root node 1</a>
<ul>
<li id="shtml_2">
<a href="#">Child node 1</a>
<ul>
<li id="a"><a href="#">Child node 1-1</a></li>
<li id="x"><a href="b">Child node 1-2</a></li>
</ul>
</li>
<li id="c"><a href="#">Child node 2</a></li>
</ul>
</li>
<li id="shtml_4">
<a href="#">Root node 2</a>
</li>
</ul>
Javascript -
$('.ajaxify').ajaxify({
target: '#container'
});
$(function(){
$("#tree").dynatree({
title: "Sample Theming",
// Image folder used for data.icon attribute.
imagePath: "skin-custom/",
onSelect: function(node) {
alert ("You selected " + node);
}
});
});
N开发者_如何学Cow i want to
- Use the jQuery Ajaxify plugin(http://max.jsrhost.com/ajaxify/demo.php) so that when user clicks on any node a ajax call gets made and the results loaded in a div.
Or
- Bind the anchor tags with jquery so that i can make onclick ajax requests.
Now whenever i use dynaTree it overrides the default behavior and prevents the anchor tag from being click able. Any thoughts on how this can be done?
Dynatree will by default remove the <a>
tags, so it is possbly easier to implement the onActivate handler:
onActivate: function(node) {
if( node.data.href ){
// use href and target attributes:
window.location.href = node.data.href;
// window.open(node.data.href, node.data.target);
// $("#div").load(node.data.href);
}
}
Starting with release 1.1.2, Dynatree will use href
and target
attributes directly from the <a>
tag:
<li id="x"><a href="b">Child node 1-2</a></li>
In older versions you have to set href like so:
<li id="x" data="href: 'b'"><a href="b">Child node 1-2</a></li>
精彩评论