首页>>Jquery文字>>动态和静态树，ajax读取数据(2013-12-10)

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

动态和静态树，ajax读取数据
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">  
  2.     <li><a href="#" id="node_1">Europe</a>  
  3.         <ul>  
  4.             <li parentId="1"><a href="#" id="node_2">Loading...</a></li>  
  5.         </ul>  
  6.     </li>  
  7.     <li><a href="#" id="node_3">Asia</a>  
  8.         <ul>  
  9.             <li parentId="2"><a href="#" id="node_4">Loading...</a></li>  
  10.         </ul>  
  11.     </li>  
  12.     <li><a href="#" id="node_5">Africa</a>  
  13.         <ul>  
  14.             <li parentId="3"><a href="#" id="node_6">Loading...</a></li>  
  15.         </ul>  
  16.     </li>  
  17.     <li><a href="#" id="node_7">America</a>  
  18.         <ul>  
  19.             <li parentId="4"><a href="#" id="node_8">Loading...</a></li>  
  20.         </ul>         
  21.     </li>     
  22. </ul>  
  23. <a href="#" onclick="expandAll('dhtmlgoodies_tree');return false">Expand all</a>  
  24. <a href="#" onclick="collapseAll('dhtmlgoodies_tree');return false">Collapse all</a>  
  25.   
  26.   
  27. <p>Static tree</p>  
  28. <ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree">  
  29.     <li><a href="#" id="node_100">Europe</a>  
  30.         <ul>  
  31.             <li><a href="#" id="node_101">Norway</a>  
  32.                 <ul>  
  33.                     <li><a href="#" id="node_102">Rogaland</a>  
  34.                         <ul>  
  35.                             <li class="dhtmlgoodies_sheet.gif"><a href="#" id="node_103">Stavanger</a></li>   
  36.                             <li class="dhtmlgoodies_sheet.gif"><a href="#" id="node_104">Haugesund</a></li>   
  37.                         </ul>  
  38.                     </li>  
  39.                     <li class="dhtmlgoodies_sheet.gif"><a href="#" id="node_105">Hordaland</a></li>  
  40.                     <li class="dhtmlgoodies_sheet.gif"><a href="#" id="node_106">Oslo</a></li>  
  41.                 </ul>  
  42.             </li>  
  43.             <li><a href="#" id="node_107">United Kingdom</a>  
  44.                 <ul>  
  45.                     <li><a href="#" id="node_108">London</a></li>  
  46.                     <li><a href="#" id="node_109">Manchester</a></li>  
  47.                     <li><a href="#" id="node_110">Oxford</a></li>  
  48.                 </ul>                 
  49.             </li>  
  50.             <li><a href="#" id="node_111">Sweden</a></li>  
  51.             <li><a href="#" id="node_112">Denmark</a></li>  
  52.             <li><a href="#" id="node_113">Germany</a></li>  
  53.         </ul>  
  54.     </li>  
  55.     <li><a href="#" id="node_114">Asia</a></li>  
  56.     <li><a href="#" id="node_115">Africa</a>  
  57.         <ul>  
  58.             <li><a href="#" id="node_116">Tanzania</a></li>  
  59.             <li><a href="#" id="node_117">Kenya</a></li>  
  60.         </ul>  
  61.     </li>  
  62.     <li><a href="#" id="node_118">America</a>  
  63.         <ul>  
  64.             <li class="dhtmlgoodies_sheet.gif"><a href="#" id="node_119">Canada</a></li>  
  65.             <li><a href="#" id="node_120">United States</a></li>  
  66.             <li class="dhtmlgoodies_sheet.gif"><a href="#" id="node_121">Mexico</a></li>  
  67.             <li><a href="#" id="node_122">Argentina</a></li>  
  68.         </ul>         
  69.     </li>     
  70. </ul>  
  71. <a href="#" onclick="expandAll('dhtmlgoodies_tree2');return false">Expand all</a>  
  72. <a href="#" onclick="collapseAll('dhtmlgoodies_tree2');return false">Collapse all</a>  
  73.   
  74. <ul id="contextMenu">  
  75.     <li><a href="#" onclick="addNewNode(event);return false">Add new node</a></li>  
  76.     <li><a href="#" onclick="deleteNode(event);return false">Delete node</a></li>  
  77. </ul>  
  78.   
  79. <script type="text/javascript">  
  80. initContextMenu();  
  81. </script>  

 writeNodes.php

PHP Code
  1. <?  
  2.   
  3. if(isset($_GET['parentId'])){  
  4.       
  5.     switch($_GET['parentId']){  
  6.   
  7.         case "1":  
  8.             ?>  
  9.             <li><a href="#">Denmark</a>  
  10.                 <ul>  
  11.                     <li parentId="12"><a href="#">Loading</a></li>  
  12.                 </ul>             
  13.             </li>  
  14.             <li><a href="#">Norway</a>  
  15.                 <ul>  
  16.                     <li parentId="11"><a href="#">Loading</a></li>  
  17.                 </ul>  
  18.             </li>  
  19.             <li><a href="#">Sweden</a></li>                       
  20.             <li><a href="#">Germany</a></li>                          
  21.             <li><a href="#">France</a></li>                       
  22.             <li><a href="#">Spain</a>  
  23.                 <ul>  
  24.                     <li parentId="14"><a href="#">Loading</a></li>  
  25.                 </ul>                 
  26.             </li>                         
  27.             <li><a href="#">Italy</a>  
  28.                 <ul>  
  29.                     <li parentId="13"><a href="#">Loading</a></li>  
  30.                 </ul>             
  31.             </li>                         
  32.             <?  
  33.             break;  
  34.         case "11":  
  35.             ?>  
  36.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Bergen</a></li>  
  37.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Stavanger</a></li>  
  38.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Trondheim</a></li>  
  39.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Oslo</a></li>                      
  40.             <?  
  41.             break;  
  42.         case "12":  
  43.             ?>  
  44.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Copenhagen</a></li>  
  45.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Aalborg</a></li>  
  46.             <?  
  47.             break;  
  48.         case "13":  
  49.             ?>  
  50.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Rome</a></li>  
  51.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Venice</a></li>  
  52.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Palermo</a></li>  
  53.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Napoli</a></li>  
  54.             <?  
  55.             break;  
  56.         case "14":  
  57.             ?>  
  58.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Madrid</a></li>  
  59.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Barcelona</a></li>  
  60.             <?  
  61.             break;  
  62.         case "2":  
  63.             ?>  
  64.             <li><a href="#">China</a></li>  
  65.             <li><a href="#">Japan</a></li>  
  66.             <?  
  67.             break;  
  68.         case "3":  
  69.             ?>  
  70.             <li><a href="#">Nigeria</a></li>  
  71.             <li><a href="#">South Africa</a></li>  
  72.             <li><a href="#">Senegal</a></li>  
  73.             <?  
  74.             break;  
  75.               
  76.               
  77.         case "4":  
  78.             ?>  
  79.             <li><a href="#">Canada</a>  
  80.                 <ul>  
  81.                     <li parentId="41"><a href="#">Loading</a></li>  
  82.                 </ul>             
  83.             </li>  
  84.             <li><a href="#">United States</a>  
  85.                 <ul>  
  86.                     <li parentId="42"><a href="#">Loading</a></li>  
  87.                 </ul>  
  88.             </li>     
  89.             <li><a href="#">Mexico</a></li>                   
  90.             <li><a href="#">Argentina</a></li>                    
  91.             <li><a href="#">Chile</a></li>                    
  92.             <li><a href="#">Brazil</a></li>                   
  93.             <li><a href="#">Bolivia</a></li>                      
  94.             <li><a href="#">Peru</a></li>                     
  95.             <?  
  96.             break;  
  97.               
  98.         case "42":  
  99.             ?>  
  100.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Washington</a></li>  
  101.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Chicago</a></li>  
  102.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Boston</a></li>  
  103.             <?  
  104.             break;    
  105.         case "41":  
  106.             ?>  
  107.             <li class="dhtmlgoodies_sheet.gif"><a href="#">Toronto</a></li>  
  108.             <?  
  109.             break;    
  110.               
  111.           
  112.           
  113.           
  114.     }  
  115. }  
  116.   
  117. ?>  

 


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