Javascript 目錄樹使用簡介

XTree 樹控件使用手冊

1?????? API 說明

1.1 ??? WebFXTreeAbstractNode

樹控件的抽象基類，不需要創建實例。它具有如下屬性和方法。

1.1.1 ?? 屬性

1.???????? id ????????? － 數字類型 只讀

樹節點的唯一標識

2.???????? text ???????????? － 字符串

節點的顯示內容

3.???????? action ?? － 字符串 ???

節點的動作響應，如 <a href=”action”>

4.???????? open????????????? － ? 布爾型 ?? 只讀

表示該節點是否為打開狀態還是合攏狀態，默認情況下當該節點下沒有子節點時返回 false

5.???????? icon??????? － ?? 字符串

指定當前節點顯示的圖標，如果不指定則使用默認圖標

6.???????? openIcon?????? － ?? 字符串

指定節點展開時的圖標（當有子節點時有效），不指定則使用默認圖標

7.???????? parentNode??? － 引用

指向父節點的引用

8.???????? childNodea???? － ?? 數組

包含該節點下的所有子節點

?

1.1.2 ?? 方法

1.???????? add(oNode, [bNodeIndent]) － ?? 返回 ??????

?

2.???????? indent()? － void

?

?

3.???????? toggle()? － void

?

4.???????? expand() － void

?

?

5.???????? collapse()?????? － void

?

6.???????? expandAll()?? － void

?

?

7.???????? collapseAll()? － void

?

8.???????? expandChildren() － void

?

?

9.???????? collapseChildren()?????? － void

?

10.???? getNextSibling()?? － ?? 返回 WebFXTreeItem 的引用

?

?

11.???? getPreviousSibling()??? － ?? 返回 WebFXTreeItem 的引用

?

12.???? toString()

?

?

1.2 ??? WebFXTree

WebFXTree 是樹控件的根實體類，繼承自 WebFXTreeAbstractNode

1.2.1 ?? 構造方法

WebFXTree(text, action, behavior, icon, openIcon)

1.2.2 ?? 屬性

1.2.3 ?? 方法

1.3 ??? WebFXTreeItem

1.3.1 ?? 構造方法

1.3.2 ?? 屬性

1.3.3 ?? 方法

2?????? 使用說明

2.1 ??? 包含 js 文件

如： <script src=”xtree.js”></script>

2.2 ??? 創建根節點

var?? root = new WebFXTree(“Root”);

2.3 ??? 添加子節點

root.all(new WebFXTreeItem(“Item1”));

root.all(new WebFXTreeItem(“Item2”));

root.all(new WebFXTreeItem(“Item3”));

?

2.4 ??? 輸出

document.write(root);

3?????? 高級應用

3.1 ??? 添加目錄

var?? root = new WebFXTree(“Root”);

root.all(new WebFXTreeItem(“1”));

var folder = new WebFXTreeItem(“2”);

root.add(folder);

foldr.all(new WebFXTreeItem(“2.1”));

folder.all(new WebFXTreeItem(“2.2”));

root.all(new WebFXTreeItem(“3”));

document.write(root);

3.2 ??? 定制行為

目錄樹的行為可以定制，通過 setBehavior 方法可以設定目錄樹中只包含目錄，如

var?? root = new WebFXTree(“Root”);

root.setBehavior(‘explorer’);

:

:

略

3.3 ??? 定制圖標

var?? root = new WebFXTree(“Root”);

root.all(new WebFXTreeItem(“1”));

var folder = new WebFXTreeItem(“2”);

root.add(folder);

var t21 = new WebFXTreeItem(“2.1”);

t21.icon=webFXTreeConfig.fileIcon;?? // 設置節點 t21 的圖標

foldr.all();

folder.all(new WebFXTreeItem(“2.2”));

root.all(new WebFXTreeItem(“3”));

document.write(root);

posted @ 2006-05-30 12:57 onlylife 閱讀(5389) | 評論 (0) | 編輯 收藏

javascript中使用showModalDialog的注意事項

在網頁上，我們一般使用window.showModalDialog(<url>,<標題>,<屬性>)來彈出一個模態對話框。但是在模態對話框中的提交有時候是無效的，而且頁面跳轉的話不是在對話框中的。
??? 解決這個問題的方法一般是在對話框中的頁面上添加一個<iframe>,由<iframe>來轉發真正的請求。為了增加頁面的可重用行，我們一般會增加一個portal頁，如下：

<% @?page?contentType = " text/html;?charset=gb2312 " ? %>
<% @?page?import = " you.RequestCacher " ? %>
<%
???? String ?requestUrl? = ? " /test/test.do " ;
???? String ?params? = ?RequestCacher.getParameters(request); // 獲取請求參數
???? String ?action? = ?requestUrl + " ? " + params;
%>

< table? width ="100%" ?height ="100%" ?border ="0" ?cellspacing ="0" >
???? < tr >
???????? < td >
???????????? < iframe? width ="100%" ?height ="100%" ?src ="<%=action%>" ></ iframe >
???????? </ td >
???? </ tr >
</ table >

posted @ 2006-05-16 11:36 onlylife 閱讀(1788) | 評論 (0) | 編輯 收藏

DWR使用注意事項

posted @ 2006-03-27 17:39 onlylife 閱讀(656) | 評論 (0) | 編輯 收藏

AJAX快速應用體驗

?????????AJAX作為一種創建全新的用戶體驗技術組合，目前已有一些開源的實現，在經過技術研究和試用以后，感覺Buffalo和DWR比較方面，能快速上手，兩者結合起來使用就更加靈活了。
??????再結合兩者使用時，建議使用DWR用作與服務器的交互，而將Buffalo提供的JavaScript對象用作回調函數處理DWR返回的結果。
??????關于Buffalo和DWR的使用，請參看作者其他文章。
?舉例如下，我要使兩各下拉框連動，一個下拉框的內容是省份，另一個的是城市，后臺獲取城市的類為Demo，獲取城市的方法為getCities(String)，則代碼如下：

< head >
< title >測試 </ title >
< link?href = " <%=styleSheet%> " ?rel = " stylesheet " ?type = " text/css " >
< script?src = " <%=webapp%>/common/scripts/validate.js " ></ script >
< script?language = " JavaScript " ?src = " <%=webapp%>/common/scripts/prototype.js " ></ script >
< script?language = " JavaScript " ?src = " <%=webapp%>/common/scripts/buffalo.js " ></ script >
< script?language = " JavaScript " ?src = " <%=webapp%>/common/scripts/template.js " ></ script >
< script?src = " <%=webapp%>/dwr/engine.js " ? ></ script >
< script?src = " <%=webapp%>/dwr/interface/Demo.js " ></ script >

< script? >
????function?changeCities(province)
???? {
????????Buffalo.Bind.bind( " city " ,?categories);
????}
????function?changeProvince(province)
???? {
????????Demo.getCities(province,changeCities);
????}
????
</ script >

</ head >
< body >
< form?name = " test " >
< table??width = " 95% " ?border = " 0 " ?align = " center " ?cellpadding = " 0 " ?cellspacing = " 0 " >
?? < tr? class = " list " >
?????? < td >
??????????省份：
?????? </ td >
?????? < td?width = " 70% " ?nowrap?? >
?????????? < select?name = " province " ?id = " provinde " ?onchange = " changeProvince(this.value) " >
??????????? < option?value = "" >- 請省份 -</ option >
??????????? < option? > 湖北 </ option > ???????
</ select >
???????? </ td >
????? </ tr >
????? < tr? >
???????? < td?width = " 30% " ?nowrap? >
???????????城市
???????? </ td >
???????? < td?width = " 70% " ?nowrap? >
???????????? < select?name = " city " ?id = " city " ></ select >
???????? </ td >
????? </ tr >
</ table >

</ html:form >

</ body >

posted @ 2006-03-22 13:11 onlylife 閱讀(718) | 評論 (0) | 編輯 收藏

DWR快速應用

DWR是一個開源的AJAX應用項目，其原理是自動生成Java類對應的JavaScript腳本，其快速應用步驟為：

1、下載dwr.jar，地址為http://getahead.ltd.uk/dwr
2、將dwr.jar復制到web應用的lib目錄下
3、修改web.xml，增加如下servlet配置段

< servlet >
?? < servlet - name > dwr - invoker </ servlet - name >
?? < display - name > DWR?Servlet </ display - name >
?? < servlet - class > uk.ltd.getahead.dwr.DWRServlet </ servlet - class >
?? < init - param >
????? < param - name > debug </ param - name >
????? < param - value > true </ param - value >
?? </ init - param >
</ servlet >

< servlet - mapping >
?? < servlet - name > dwr - invoker </ servlet - name >
?? < url - pattern >/ dwr /**/ /* </url-pattern>
</servlet-mapping>

?4、在web.xml同一目錄下創建dwr.xml，內容如下

?1 <! DOCTYPE?dwr?PUBLIC
?2 ???? " -//GetAhead?Limited//DTD?Direct?Web?Remoting?1.0//EN "
?3 ???? " http://www.getahead.ltd.uk/dwr/dwr10.dtd " >
?4
?5 < dwr >
?6 ?? < allow >
?7 ???? < create?creator = " new " ?javascript = " JDate " >
?8 ?????? < param?name = " class " ?value = " java.util.Date " />
?9 ???? </ create >
10 ???? < create?creator = " new " ?javascript = " Demo " >
11 ?????? < param?name = " class " ?value = " your.java.Bean " />
12 ???? </ create >
13 ?? </ allow >
14 </ dwr >
15

1<script?type="text/javascript"?src="[WEBAPP]/dwr/interface/Demo.js">?</script><!--調用類-->
2<script?type="text/javascript"?src="[WEBAPP]/dwr/engine.js">?</script><!--DWR引擎-->
3

<script>
function?handleGetData(str)?
{
??alert(str);
}

Demo.getData(42,?handleGetData);//getData是Demo的一個方法，參數是整型，handleGetData是回調函數，處理getData的返回值
</script>

posted @ 2006-03-22 10:56 onlylife 閱讀(910) | 評論 (0) | 編輯 收藏