动态和静态树，ajax读取数据

来源：互联网发布：python 中文注释编辑：程序博客网时间：2024/05/01 19:12

动态和静态树，ajax读取数据

演示

XML/HTML Code
<ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">  
    <li><a href="#" id="node_1">Europe</a>  
        <ul>  
            <li parentId="1"><a href="#" id="node_2">Loading...</a></li>  
        </ul>  
    </li>  
    <li><a href="#" id="node_3">Asia</a>  
        <ul>  
            <li parentId="2"><a href="#" id="node_4">Loading...</a></li>  
        </ul>  
    </li>  
    <li><a href="#" id="node_5">Africa</a>  
        <ul>  
            <li parentId="3"><a href="#" id="node_6">Loading...</a></li>  
        </ul>  
    </li>  
    <li><a href="#" id="node_7">America</a>  
        <ul>  
            <li parentId="4"><a href="#" id="node_8">Loading...</a></li>  
        </ul>         
    </li>     
</ul>  
<a href="#" onclick="expandAll('dhtmlgoodies_tree');return false">Expand all</a>  
<a href="#" onclick="collapseAll('dhtmlgoodies_tree');return false">Collapse all</a>  
  
  
<p>Static tree</p>  
<ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree">  
    <li><a href="#" id="node_100">Europe</a>  
        <ul>  
            <li><a href="#" id="node_101">Norway</a>  
                <ul>  
                    <li><a href="#" id="node_102">Rogaland</a>  
                        <ul>  
                            <li class="dhtmlgoodies_sheet.gif"><a href="#" id="node_103">Stavanger</a></li>   
                            <li class="dhtmlgoodies_sheet.gif"><a href="#" id="node_104">Haugesund</a></li>   
                        </ul>  
                    </li>  
                    <li class="dhtmlgoodies_sheet.gif"><a href="#" id="node_105">Hordaland</a></li>  
                    <li class="dhtmlgoodies_sheet.gif"><a href="#" id="node_106">Oslo</a></li>  
                </ul>  
            </li>  
            <li><a href="#" id="node_107">United Kingdom</a>  
                <ul>  
                    <li><a href="#" id="node_108">London</a></li>  
                    <li><a href="#" id="node_109">Manchester</a></li>  
                    <li><a href="#" id="node_110">Oxford</a></li>  
                </ul>                 
            </li>  
            <li><a href="#" id="node_111">Sweden</a></li>  
            <li><a href="#" id="node_112">Denmark</a></li>  
            <li><a href="#" id="node_113">Germany</a></li>  
        </ul>  
    </li>  
    <li><a href="#" id="node_114">Asia</a></li>  
    <li><a href="#" id="node_115">Africa</a>  
        <ul>  
            <li><a href="#" id="node_116">Tanzania</a></li>  
            <li><a href="#" id="node_117">Kenya</a></li>  
        </ul>  
    </li>  
    <li><a href="#" id="node_118">America</a>  
        <ul>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#" id="node_119">Canada</a></li>  
            <li><a href="#" id="node_120">United States</a></li>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#" id="node_121">Mexico</a></li>  
            <li><a href="#" id="node_122">Argentina</a></li>  
        </ul>         
    </li>     
</ul>  
<a href="#" onclick="expandAll('dhtmlgoodies_tree2');return false">Expand all</a>  
<a href="#" onclick="collapseAll('dhtmlgoodies_tree2');return false">Collapse all</a>  
  
<ul id="contextMenu">  
    <li><a href="#" onclick="addNewNode(event);return false">Add new node</a></li>  
    <li><a href="#" onclick="deleteNode(event);return false">Delete node</a></li>  
</ul>  
  
<script type="text/javascript">  
initContextMenu();  
</script>  

writeNodes.php

PHP Code
<?  
  
if(isset($_GET['parentId'])){  
      
    switch($_GET['parentId']){  
  
        case "1":  
            ?>  
            <li><a href="#">Denmark</a>  
                <ul>  
                    <li parentId="12"><a href="#">Loading</a></li>  
                </ul>             
            </li>  
            <li><a href="#">Norway</a>  
                <ul>  
                    <li parentId="11"><a href="#">Loading</a></li>  
                </ul>  
            </li>  
            <li><a href="#">Sweden</a></li>                       
            <li><a href="#">Germany</a></li>                          
            <li><a href="#">France</a></li>                       
            <li><a href="#">Spain</a>  
                <ul>  
                    <li parentId="14"><a href="#">Loading</a></li>  
                </ul>                 
            </li>                         
            <li><a href="#">Italy</a>  
                <ul>  
                    <li parentId="13"><a href="#">Loading</a></li>  
                </ul>             
            </li>                         
            <?  
            break;  
        case "11":  
            ?>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Bergen</a></li>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Stavanger</a></li>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Trondheim</a></li>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Oslo</a></li>                      
            <?  
            break;  
        case "12":  
            ?>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Copenhagen</a></li>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Aalborg</a></li>  
            <?  
            break;  
        case "13":  
            ?>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Rome</a></li>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Venice</a></li>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Palermo</a></li>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Napoli</a></li>  
            <?  
            break;  
        case "14":  
            ?>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Madrid</a></li>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Barcelona</a></li>  
            <?  
            break;  
        case "2":  
            ?>  
            <li><a href="#">China</a></li>  
            <li><a href="#">Japan</a></li>  
            <?  
            break;  
        case "3":  
            ?>  
            <li><a href="#">Nigeria</a></li>  
            <li><a href="#">South Africa</a></li>  
            <li><a href="#">Senegal</a></li>  
            <?  
            break;  
              
              
        case "4":  
            ?>  
            <li><a href="#">Canada</a>  
                <ul>  
                    <li parentId="41"><a href="#">Loading</a></li>  
                </ul>             
            </li>  
            <li><a href="#">United States</a>  
                <ul>  
                    <li parentId="42"><a href="#">Loading</a></li>  
                </ul>  
            </li>     
            <li><a href="#">Mexico</a></li>                   
            <li><a href="#">Argentina</a></li>                    
            <li><a href="#">Chile</a></li>                    
            <li><a href="#">Brazil</a></li>                   
            <li><a href="#">Bolivia</a></li>                      
            <li><a href="#">Peru</a></li>                     
            <?  
            break;  
              
        case "42":  
            ?>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Washington</a></li>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Chicago</a></li>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Boston</a></li>  
            <?  
            break;    
        case "41":  
            ?>  
            <li class="dhtmlgoodies_sheet.gif"><a href="#">Toronto</a></li>  
            <?  
            break;    
              
          
          
          
    }  
}  
  
?>  

原文地址:http://www.freejs.net/article_jquerywenzi_165.html

1 0