TreeView in SalesForce

                                                                      TreeView  

How to implement Treeview in our Salesforce?
Here, in our example i am populating Account and it's related contacts.

public class Treeview
{
    public list<Childrecords> Assigning1{get;set;}
    public integer i;
    public string AccountName{get;set;}
    public class Childrecords
    {
        public list<contact> contactsrecords{get;set;}
        public Account Accountrecords{get;set;}
        public Childrecords(Account acc,list<contact> con)
        {
            Accountrecords= acc;
            contactsrecords = con;
        }
  
    }
    public list<Childrecords> getmethoddemo()
    {
        Assigning1 = new list<Childrecords>();
        list<Account> acc1 = new list<Account>();
        AccountName = '%'+AccountName+'%';
        string AccountName1 = AccountName ;
        if(AccountName1 !='%null%' )
        {
            acc1 = [select id,Name,Rating,Phone from Account where Name LIKE:AccountName1 limit 50];
        }
        else
        {
            acc1 = [select id,Name,Rating,Phone from Account limit 50];
        }
        for(integer i=0;i<acc1.size();i++)
        {
            list<Contact> Con2 = [Select id,LastName,Phone,AccountID,Email from contact where AccountID=:acc1[i].ID];
            Assigning1.add(new Childrecords(acc1[i],Con2));
        }
        return Assigning1;
    }
}

Page:


<apex:page Controller="Treeview">
    <apex:form >
        <apex:pageBlock title="Account Treeview">
       
<!-- Include the Jquery Script files -->
    <link rel="stylesheet" href="{!URLFOR($Resource.TreeviewInSalesforce,'Jquerytreeview/jquery.treeview.css')}"/>
    <script src="{!URLFOR($Resource.TreeviewInSalesforce,'Jquerytreeview/jquery.js')}" type="text/javascript"></script>
    <script src="{!URLFOR($Resource.TreeviewInSalesforce,'Jquerytreeview/jquery.cookie.js')}" type="text/javascript"></script>
    <script src="{!URLFOR($Resource.TreeviewInSalesforce,'Jquerytreeview/jquery.treeview.js')}" type="text/javascript"></script>
<!-- End of Javascript files -->
<script type="text/javascript">
        $(function() {
            $("#tree").treeview({
                collapsed: true,
                animated: "medium",
                control:"#sidetreecontrol",
                persist: "location"
            });
        })
</script>
<br/>
<!-- Tree -->
<div class="treeheader" style="height:0px;">&nbsp;</div>
<div id="sidetreecontrol"><a href="?#"><font style="color:blue;">Collapse All</font></a> | <a href="?#"><font style="color:blue;">Expand All</font></a></div>
<br/>
<ul id="tree">
    <apex:repeat value="{!methoddemo}" var="MainMethodVar">
        <li>
            <table style="width:100%" >
                <tr style="width:100%">                   
                    <td style="width:30%">
                       <strong><apex:outputlink style="color:MidnightBlue;" target="_blank" value="/{!MainMethodVar.Accountrecords.ID}">{!MainMethodVar.Accountrecords.Name}</apex:outputlink></strong>                   
                    </td>
                    <td style="width:30%">
                         <strong><apex:outputtext style="color:MidnightBlue;" escape="false" value="{!MainMethodVar.Accountrecords.Phone}"/></strong>
                    </td>
                    <td style="width:40%">
                         <strong><apex:outputtext style="color:MidnightBlue;" escape="false" value="{!MainMethodVar.Accountrecords.Rating}"/></strong>
                    </td>
                </tr>
              </table>     
             <ul>
                 <apex:repeat value="{!MainMethodVar.contactsrecords}" var="child">
                    <li>
                    <table style="width:100%" >
                    <tr style="width:100%">
                   
                    <td style="width:30%">
                       <span class="formattextcon"><apex:outputtext style="color:red;" escape="false" value="{!child.LastName}"/></span>                   
                    </td>
                    <td style="width:30%">
                         <span class="formattextcon"><apex:outputtext style="color:red;" escape="false" value="{!child.Email}"/></span>
                    </td>
                    <td style="width:40%">
                         <strong><apex:outputtext style="color:MidnightBlue;" escape="false" value="{!child.Phone}"/></strong>
                    </td>
                </tr>
              </table>
                   
                                                 
                    </li>
                 </apex:repeat> 
             </ul> 
        </li>
    </apex:repeat>
</ul>
    </apex:pageBlock>
    </apex:form> 
</apex:page>

Hope you like this Concept :)

Have a great day. Tomorrow i will post one more useful concept.