這兩天,為了實現ajax的樹形目錄,找了很多代碼. 最后確定用xloadtree.
在xloadtree的主頁上, 有項目xtree 和xloadtree 一個是固定顯示的樹,一個是動態加載的樹.
在他的隱藏目錄里,有一個xtree2 地址為
http://webfx.eae.net/dhtml/xtree2b/ 這個是正在測試的版本, 融合了xtree和xloadtree. 更新了代碼, 但還是beta版.
xloadtree 可以在各種瀏覽器下通用. 兼容性效果非常好.
主要的三個文件: xtree2.js, xloadtree2.js, xtree2.css
xloadtree2.js 主要是對ajax方式的封裝, 實現異步調用. 顯示樹的時候,調用xtree2.js里面的代碼. xtree2.css 控制樹的顯示式樣. 在查看他的文檔的時候，主要看xtree2的文檔，這里面才有對樹怎樣進行操作. xloadtree只是個調用包裝.
xtree2.js :
輸出html代碼的時候, 調用的是toHtml() 方法. 在這個方法中,其中最主要的是getRowHtml() 來得到每一行的輸出. 方法中用 getExpandIconHtml() 來控制展開后圖標的代碼輸出, getIconHtml()控制未展開的圖標輸出. getLabelHtml() 控制文本的輸出, 如果不想要圖標,就把圖標的輸出代碼屏蔽掉就OK.
關于在頁面輸出后,看不到源代碼的調試方法:
<br/>
<INPUT type="button" name="ad" onclick="charge();" value="change">
<br/>
<TEXTAREA rows="10" cols="30" id="ttt" name="ttt"></TEXTAREA>
<br/>
<INPUT type="button" name="findnode" onclick="findnode();" value="findnode">
<br/>
<INPUT type="button" name="openpath" onclick="openpath();" value="openpath">
<script>
function charge(){
document.getElementById('ttt').value=tree.getSelected().toHtml();
}
function findnode(){
tree.findChildByText(document.getElementById('ttt').value,0);
}
function openpath(){
tree.openPath(webFXTreeHandler.htmlToText(document.getElementById('ttt').value),true);
tree.getSelected().expand();
}
</script>
在頁面中放置如上代碼. 注意,先要獲得樹的句柄. 比較創建樹的時候,用如下代碼:
var tree = new WebFXTree("<%=rootname%>");
在展開的樹點,選擇后, 點擊change 按鈕,可以得到這個節點對應的html代碼. 然后對應html可以找到相應的CSS. 這個就不多寫了.
xloadtree在調用子節點樹的時候,和服務器之間傳輸的是xml.
DTD的定義如下
<!ELEMENT tree (tree*)>
<!ATTLIST tree
text CDATA #REQUIRED
src CDATA #IMPLIED
action CDATA #IMPLIED
icon CDATA #IMPLIED
openIcon CDATA #IMPLIED
target CDATA #IMPLIED>
其中 text為顯示文本, src為下級目錄目錄的地址. action為點擊的鏈接. icon為圖標，openIcon為節點打開后的圖標. target為目標，和a標簽的target用法一樣.
因為xml 文件不能傳送< > 這種符號, 可以采用< > 傳送. 因為項目里需要在樹上顯示HTML代碼,所以在js里面做了修改. 修改的部分比較多. 還沒有測試有沒有意外情況. 這個以后再說.
還有, 在使用過程中,有一個BUG. 是設置tabindex的. 會出錯.
this.setTabIndex(this.tabIndex);
將xtree2.js文件中的這一行屏蔽掉就行了. 當然,先要確定你不需要使用tab鍵定位. :)
2006- 4- 22 增加:
在要打開指定目錄樹的時候 如果樹里面包含html代碼, 可以用如下語句
<script>try{top.tree.tree.openPath(webFXTreeHandler.htmlToText("/北京新東方學校/<font color=red><b>留學考試</b></font>/fff"),true);}catch(err){}</script>
2006-5-19
前天在同事應用的時候，出現的問題是加載過程中如果樹結點為中文，就加載不上. 后來找到問題的原因是在用servlet輸出xml 的時候，是用的steam的方式， 后來改成字符輸出方式才正確. 如下.
PrintWriter out=response.getWriter();
out.write(outputXML.toString());
out.flush();
out.close();
2008-09-03
關于隨機參數，指的是URL請求中帶有一個隨機參數。 這個參數，可以是當前時間，或者隨機數。 用來避開瀏覽器的緩存