假設(shè)您要從資料庫(kù)中查詢(xún)出一些字串，然後填寫(xiě)到表單的下拉選單中。
例如一個(gè)示意的Java程式如下：
12345678 package onlyfun.caterpillar; public class Option { public String[] getOptions() { // 實(shí)際上這些字串是從資料庫(kù)中查到的啦… return new String[] {"良葛格", "毛美眉", "米小狗"}; }}
傳回的字串陣列，您要填寫(xiě)到下拉選單中，當(dāng)然，首先我們要在dwr.xml中開(kāi)發(fā)這個(gè)物件…
12345678910 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr> <allow> <create creator="new" javascript="OPT"> <param name="class" value="onlyfun.caterpillar.Option"/> </create> </allow></dwr>
這是我們的網(wǎng)頁(yè)…
123456789101112131415 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5"><script src="option.js" type="text/javascript"></script><script src="dwr/interface/OPT.js" type="text/javascript"></script><script src="dwr/engine.js" type="text/javascript"></script><script src="dwr/util.js" type="text/javascript"></script> </head> <body> 選項(xiàng): <select id="opts"></select></body></html>
傳回的字串陣列會(huì)填入opts這個(gè)select中，我們的option.js如下…
12345678 window.onload = function() { OPT.getOptions(populate); }; function populate(list){ DWRUtil.removeAllOptions("opts"); DWRUtil.addOptions("opts", list);}
夠簡(jiǎn)單了…不需要解釋了…
看一下結(jié)果…
好啦！我知道有人在說(shuō)了，這個(gè)程式有夠無(wú)聊…
改一下！就是個(gè)不錯(cuò)的範(fàn)例了，例如連動(dòng)方塊，唔！在Ajax in action中叫啥？Dynamic double combo？…
假設(shè)一個(gè)會(huì)去從資料庫(kù)中查詢(xún)資料的Java程式示意如下：
123456789101112131415161718192021222324252627282930 package onlyfun.caterpillar; import java.util.Map;import java.util.TreeMap; public class Bike { private Map<String, String[]> bikes; public Bike() { bikes = new TreeMap<String, String[]>(); bikes.put("2000", new String[] {"2000 T1", "2000 T2", "2000 T3"}); bikes.put("2001", new String[] {"2001 A1", "2001 A2"}); bikes.put("2002", new String[] {"2002 BW1", "2002 BW2", "2002 BW"}); bikes.put("2003", new String[] {"2003 S320"}); bikes.put("2004", new String[] {"2004 TA1", "2004 TA2", "2004 TA3"}); } public String[] getYears() { String[] keys = new String[bikes.size()]; int i = 0; for(String key : bikes.keySet()) { keys[i++] = key; } return keys; } public String[] getBikes(String year) { return bikes.get(year); }}
getYears()跟getBkies()分別表示產(chǎn)品的年份跟型號(hào)，這邊用Map模擬，實(shí)際上資料是來(lái)自資料庫(kù)的查詢(xún)。
一樣的，在dwr.xml中設(shè)定：
12345678910 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr> <allow> <create creator="new" javascript="Bike" scope="application"> <param name="class" value="onlyfun.caterpillar.Bike"/> </create> </allow></dwr>
我們會(huì)有個(gè)腳踏車(chē)年份與型號(hào)查詢(xún)頁(yè)面：
123456789101112131415 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5"><title>Insert title here</title> <script type='text/javascript' src='dwr/interface/Bike.js'></script> <script type='text/javascript' src='dwr/engine.js'></script> <script type='text/javascript' src='dwr/util.js'></script> <script type='text/javascript' src='bike.js'></script></head><body onload="refreshYearList();"> 年份：<select id="years" onchange="refreshBikeList();"></select><br/><br/> 型號(hào)：<select id="bikes"></select><br/></body></html>
注意，在選完第一個(gè)年份後，會(huì)觸發(fā)onchange事件，接著第二個(gè)下拉選單會(huì)自動(dòng)填上對(duì)應(yīng)年份的型號(hào)，而不是按鈕按下，再去取得第二個(gè)下拉選單，然後refresh...blah...blah...
bike.js如下…
12345678910111213141516171819 function refreshYearList() { Bike.getYears(populateYearList);} function populateYearList(list){ DWRUtil.removeAllOptions("years"); DWRUtil.addOptions("years", list); refreshBikeList();} function refreshBikeList() { var year = $("years").value; Bike.getBikes(year, populateBikeList);} function populateBikeList(list){ DWRUtil.removeAllOptions("bikes"); DWRUtil.addOptions("bikes", list);}
一樣很簡(jiǎn)單…
看個(gè)無(wú)聊的畫(huà)面…XD
本文來(lái)自CSDN博客，轉(zhuǎn)載請(qǐng)標(biāo)明出處：http://blog.csdn.net/caterpillar_here/archive/2006/09/18/1239538.aspx