dhtmlxtree用Ajax重新整理載入XML

     很久以前，我學會了用dhtmlxtree，那是一棵很不錯的樹，用起來很方便，但是一個問題一直沒有解決，從前都是分很多次去資料庫中查，遵循的原則是，先查出上級，然後再根據上級ID查出下級ID，這樣一層一層的查，於是當資料量大了，樹載入的時候會很的很慢，有時候等他開始載入的時候，可以告訴螢幕前的人員，“您可以選擇去查喝杯咖啡或者出去逛逛再回來，因為需要很久”，頓時無語。

    資料庫是這樣設計的：

    ID    名稱     上級ID

    1      A        

    2      B       

    3      C        1

    4      D        1

    ……

   使用dhtmlxtree的方法(自己查看API)：

  第一步：載入JS,CSS,其中包括dhtmlxcommon.js,dhtmlxtree.js,dhtmlXTreeExtend.js,dhtmlxtree.css

  第二步：寫入HTML，如下

  <table width="100%" class="searchTable">
  <tr><td class="searchTdTitle">分類體繫結構</td>
  </tr>
  <tr>
    <td class="lefttree"><a href="javascript:void(0);" onclick="tree.openAllItems(0);">展開</a>&nbsp;&nbsp;&nbsp;
      <a href="javascript:void(0);" onclick="tree.closeAllItems(0);">收攏</a></td>
  </tr>
  <tr>
    <td class="lefttree"><div id="treeboxbox_tree" class="dhtmlxTree" style="width:230px;"></div></td>
  </tr>
</table>
 <script>
  tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);//初始化樹
  tree.setImagePath("<%=path %>/skins/blue/common/dhtmlx/images/csh_yellowbooks/");//設計圖片路徑
  tree.enableCheckBoxes(0);//是否顯示複選框
  tree.loadXML("<%=path%>/drmsTaxon.do?action=taxonTree"); //XML路徑

  tree.setOnClickHandler(addChild);   //單擊函數
 </script>
</body>

//單擊時所需載入的函數:

//偶喜歡用jquery，所以得需要調用jquery的函數(哎喲，這不需要偶提供了吧，上Google，啥都知道了),

function addChild(id){
  tree.deleteChildItems(tree.getSelectedItemId(id));//載入之前先刪除他的頁子結點
  var url="<%=path%>/drmsTaxon.do?action=getTaxonChild&taxonId="+tree.getSelectedItemId(id);//發送AJAX的URL
  $.getJSON(
    url,
    function(data){
       $.each(data.rows,function(entryIndex,entry){//ajax回調後,類似於for迴圈.
            tree.insertNewChild(tree.getSelectedItemId(id),entry['taxonId'],entry['taxonName'],'','leaf.gif','folderOpen.gif','folderClosed.gif','','');//使用這個函數.
      });
     }
   );
}

 

函數說明：

insertNewItem(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)

很明顯，第一個parentId是父結點. itemId,itemText載入的子結點的ID與名稱.itemActionHandler偶沒用過，初分析應該是所需調用的函數，image1,image2,image3很明顯是圖片地址與路徑.optionStr,childs偶也沒有使用過，下次用了再告訴你