javascript - salesforce 動的繰り返し回数の使用方法

Question

public class product2tree
{


public List<prowrapper> prowrapperlist{get;set;}
Map<ID,product2__c> promap;

public product2tree()
{
    prowrapperlist=new List<prowrapper>();
    promap=new Map<ID,product2__c>();
    for(product2__c pro:[select name,product2__c,(select name,product2__c from product2s__r) from product2__c])
        {
            promap.put(pro.id,pro);
        }
    for(ID id:promap.keySet())
        {
            product2__c pro=promap.get(id);
            if(pro.product2__c==null)
                {
                  prowrapperlist.add(new prowrapper(pro,promap));
                }
        }
}

public class prowrapper
{
     public String name{get;set;}
     public List<prowrapper> child{get;set;}
     public boolean isSelected{get;set;}
     Id proid;

     public prowrapper(product2__c pro,Map<ID,product2__c> promap1)
        {
            child=new List<prowrapper>();
            pro=promap1.get(pro.id);
            name=pro.name;
            isSelected=false;
            proid=pro.id;
            for(product2__c pro1:pro.product2s__r)
              {
                 child.add(new prowrapper(pro1,promap1));                          
              }

        }
}

}

今、私は、prowrapperlist を、visualforce ページに treeView として表示したいと考えています。問題は、それがマルチレベルの深さであり、任意のレベルの深さになる可能性があることです。Visualforceページでこれを表示する方法を教えてください。

私がこのように使用しているvisualforceページで

<apex:repeat value="{!prowrapperlist}" var="pro">


    <li>
        {!pro.name}

        <ul>
        <apex:repeat value="{!pro.child}" var="proc">
            <li>
                {!proc.name} 
                <ul>
                    <apex:repeat value="{!proc.child}" var="proc1">
                    <li>
                        {!proc1.name} 
                        <ul>
                            <apex:repeat value="{!proc1.child}" var="proc2">
                            <li>
                                {!proc2.name} &nbsp;&nbsp;&nbsp;&nbsp;

                                <apex:inputCheckbox value="{!proc2.isSelected}"/>

                            </li>
                              </apex:repeat>
                       </ul>

                    </li>
                    </apex:repeat>
                </ul>



            </li>
        </apex:repeat>
        </ul>

    </li>

 </apex:repeat>   

完全に静的であることを意味します。繰り返しを使用する限り、そのレベルの深いツリーを表示できます。しかし、私はそれを動的にしたい。forループと同じ意味です。javascript、jquery、angularjsなど、任意のライブラリを使用できます

前もって感謝します。