I would like to construct the tree view using the JSON with Two object(Account & Contact).
root node is the account id and sub node would be the contact(nested level).
Treeview:
<apex:page controller="samplecontroller">
<apex:includeScript value="{!URLFOR($Resource.DynaTree, 'jquery/jquery.js' )}" />
<apex:includeScript value="{!URLFOR($Resource.DynaTree, 'jquery/jquery-ui.custom.js' )}" />
<apex:includeScript value="{!URLFOR($Resource.DynaTree, 'jquery/jquery.cookie.js' )}" />
<apex:includeScript value="{!URLFOR($Resource.DynaTree, 'src/jquery.dynatree.js' )}" />
<apex:stylesheet value="{!URLFOR($Resource.DynaTree, 'src/skin/ui.dynatree.css')}" />
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
//JSON STRING WILL COME ASSING BELOW FORM THE CONTROLLER
children: {!JsonString},
onSelect: function(select, node)
{
// Get a list of all selected nodes, and convert to a key array:
var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
return node.data.key;
});
jQuery(document.getElementById("{!$Component.selectedKeys}")).val(selKeys.join(", "));
// Get a list of all selected TOP nodes
var selRootNodes = node.tree.getSelectedNodes(true);
// ... and convert to a key array:
var selRootKeys = $.map(selRootNodes, function(node){
return node.data.key;
});
},
});
});
</script>
<!-- Add a <div> element where the tree should appear: -->
<div id="tree">
</div>
</apex:page>