這兩天,為了實(shí)現(xiàn)ajax的樹形目錄,找了很多代碼. 最后確定用xloadtree.
在xloadtree的主頁(yè)上, 有項(xiàng)目xtree 和xloadtree 一個(gè)是固定顯示的樹,一個(gè)是動(dòng)態(tài)加載的樹.
在他的隱藏目錄里,有一個(gè)xtree2 地址為
http://webfx.eae.net/dhtml/xtree2b/ 這個(gè)是正在測(cè)試的版本, 融合了xtree和xloadtree. 更新了代碼, 但還是beta版.
xloadtree 可以在各種瀏覽器下通用. 兼容性效果非常好.
主要的三個(gè)文件: xtree2.js, xloadtree2.js, xtree2.css
xloadtree2.js 主要是對(duì)ajax方式的封裝, 實(shí)現(xiàn)異步調(diào)用. 顯示樹的時(shí)候,調(diào)用xtree2.js里面的代碼. xtree2.css 控制樹的顯示式樣. 在查看他的文檔的時(shí)候，主要看xtree2的文檔，這里面才有對(duì)樹怎樣進(jìn)行操作. xloadtree只是個(gè)調(diào)用包裝.
xtree2.js :
輸出html代碼的時(shí)候, 調(diào)用的是toHtml() 方法. 在這個(gè)方法中,其中最主要的是getRowHtml() 來(lái)得到每一行的輸出. 方法中用 getExpandIconHtml() 來(lái)控制展開后圖標(biāo)的代碼輸出, getIconHtml()控制未展開的圖標(biāo)輸出. getLabelHtml() 控制文本的輸出, 如果不想要圖標(biāo),就把圖標(biāo)的輸出代碼屏蔽掉就OK.
關(guān)于在頁(yè)面輸出后,看不到源代碼的調(diào)試方法:
<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>
在頁(yè)面中放置如上代碼. 注意,先要獲得樹的句柄. 比較創(chuàng)建樹的時(shí)候,用如下代碼:
var tree = new WebFXTree("<%=rootname%>");
在展開的樹點(diǎn),選擇后, 點(diǎn)擊change 按鈕,可以得到這個(gè)節(jié)點(diǎn)對(duì)應(yīng)的html代碼. 然后對(duì)應(yīng)html可以找到相應(yīng)的CSS. 這個(gè)就不多寫了.
xloadtree在調(diào)用子節(jié)點(diǎn)樹的時(shí)候,和服務(wù)器之間傳輸?shù)氖莤ml.
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為下級(jí)目錄目錄的地址. action為點(diǎn)擊的鏈接. icon為圖標(biāo)，openIcon為節(jié)點(diǎn)打開后的圖標(biāo). target為目標(biāo)，和a標(biāo)簽的target用法一樣.
因?yàn)閤ml 文件不能傳送< > 這種符號(hào), 可以采用< > 傳送. 因?yàn)轫?xiàng)目里需要在樹上顯示HTML代碼,所以在js里面做了修改. 修改的部分比較多. 還沒(méi)有測(cè)試有沒(méi)有意外情況. 這個(gè)以后再說(shuō).
還有, 在使用過(guò)程中,有一個(gè)BUG. 是設(shè)置tabindex的. 會(huì)出錯(cuò).
this.setTabIndex(this.tabIndex);
將xtree2.js文件中的這一行屏蔽掉就行了. 當(dāng)然,先要確定你不需要使用tab鍵定位. :)
2006- 4- 22 增加:
在要打開指定目錄樹的時(shí)候 如果樹里面包含html代碼, 可以用如下語(yǔ)句
<script>try{top.tree.tree.openPath(webFXTreeHandler.htmlToText("/北京新東方學(xué)校/<font color=red><b>留學(xué)考試</b></font>/fff"),true);}catch(err){}</script>
2006-5-19
前天在同事應(yīng)用的時(shí)候，出現(xiàn)的問(wèn)題是加載過(guò)程中如果樹結(jié)點(diǎn)為中文，就加載不上. 后來(lái)找到問(wèn)題的原因是在用servlet輸出xml 的時(shí)候，是用的steam的方式， 后來(lái)改成字符輸出方式才正確. 如下.
PrintWriter out=response.getWriter();
out.write(outputXML.toString());
out.flush();
out.close();
2008-09-03
關(guān)于隨機(jī)參數(shù)，指的是URL請(qǐng)求中帶有一個(gè)隨機(jī)參數(shù)。 這個(gè)參數(shù)，可以是當(dāng)前時(shí)間，或者隨機(jī)數(shù)。 用來(lái)避開瀏覽器的緩存