Visualforce page code:
<apex:page controller="treeviewcon" sidebar="false"
showHeader="false">
<html>
<head>
<apex:includeScript
value="{!URLFOR($Resource.jqueryminjs)}" />
<apex:stylesheet
value="{!URLFOR($Resource.jquerycss)}"/>
<apex:stylesheet
value="http://jquery.bassistance.de/treeview/jquery.treeview.css"/>
<apex:includeScript
value="http://jquery.bassistance.de/treeview/lib/jquery.js"/>
<apex:includeScript
value="http://jquery.bassistance.de/treeview/lib/jquery.cookie.js"/>
<apex:includeScript
value="http://jquery.bassistance.de/treeview/jquery.treeview.js"/>
<apex:includeScript
value="http://jquery.bassistance.de/treeview/demo/demo.js"/>
<style
type="text/css">
#browser {
font-family: Verdana, helvetica,
arial, sans-serif;
font-size: 120%;
font-weight:bold;
}
</style>
<script>
$(document).ready(function(){
$("#browser").treeview();
});
</script>
</head>
<body><br/><br/>
<div style="width:300px;margin-left:50px;">
<apex:pageBlock >
<ul id="browser"
class="filetree">
<apex:repeat
value="{!accnts}" var="acc">
<li
class="closed"><span
class="folder">{!acc.name}</span>
<ul>
<apex:repeat
value="{!acc.contacts}" var="c">
<li><span
class="file"><a href="/{!c.id}"
target="_blank">{!c.name}</a></span></li>
</apex:repeat>
</ul>
</li>
</apex:repeat>
</ul>
</apex:pageBlock>
</div>
</body>
</html>
</apex:page>
Controller:
public with sharing class treeviewcon {
public
List<Account> accnts{get; set;}
public treeviewcon(){
accnts = [Select
id, name,(Select id, name from Contacts) from account];
}
}
TreeView :
From where could we downlowd the jquery plugin? can you give me the link for that plugin and steps to upload it in Salesforce
ReplyDeleteYou can find the Jquery css and js files here,
ReplyDeleteCSS: http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
JS : http://code.jquery.com/jquery-1.9.1.js
+ and - symbols are not rendering. Any reason.?
ReplyDeleteJquery is an advanced programming language. Treeview is a best approach to show large amount of data in hierarchical fashion. Compare to Server-side treeview client-side treeview helps to improve performance of a web application. How it is if after fetch data from the server will render those data using client script. There are various of languages using which we can create treeview. Lets talk about JavaScript. JavaScript is a client side language. To create a treeview using JavaScript we required to write more them 100 lines of code. The same treeview can achieved easily with less line of codes using JQuery. Look at this example http://jharaphula.com/jquery-treeview-example-using-html-ul-li-elements
ReplyDelete