假設(shè)您要從資料庫(kù)中查詢出一些字串，然後填寫到表單的下拉選單中。
例如一個(gè)示意的Java程式如下：
1
2
3
4
5
6
7
8
|
package
onlyfun.caterpillar;
?
public
class
Option
{
public
String[] getOptions()
{
// 實(shí)際上這些字串是從資料庫(kù)中查到的啦…
return
new
String[]
{
"良葛格"
,
"毛美眉"
,
"米小狗"
}
;
}
}
|
傳回的字串陣列，您要填寫到下拉選單中，當(dāng)然，首先我們要在dwr.xml中開發(fā)這個(gè)物件…
1
2
3
4
5
6
7
8
9
10
|
<?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è)…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!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如下…
1
2
3
4
5
6
7
8
|
window.onload = function()
{
OPT.getOptions(populate);
}
;
?
function populate(list)
{
DWRUtil.removeAllOptions(
"opts"
);
DWRUtil.addOptions(
"opts"
, list);
}
|
夠簡(jiǎn)單了…不需要解釋了…
看一下結(jié)果…?
好啦！我知道有人在說了，這個(gè)程式有夠無(wú)聊…
改一下！就是個(gè)不錯(cuò)的範(fàn)例了，例如連動(dòng)方塊，唔！在Ajax in action中叫啥？Dynamic double combo？…
假設(shè)一個(gè)會(huì)去從資料庫(kù)中查詢資料的Java程式示意如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
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ù)的查詢。
一樣的，在dwr.xml中設(shè)定：
1
2
3
4
5
6
7
8
9
10
|
<?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è)腳踏車年份與型號(hào)查詢頁(yè)面：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!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如下…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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ú)聊的畫面…XD
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
