亚洲综合激情另类专区,亚洲AV成人无码久久精品老人,亚洲狠狠综合久久

假設(shè)您要從資料庫(kù)中查詢出一些字串，然後填寫(xiě)到表單的下拉選單中。

例如一個(gè)示意的Java程式如下：

package onlyfun.caterpillar;
 
public class Option {
  public String[] getOptions() {
                // 實(shí)際上這些字串是從資料庫(kù)中查到的啦…
    return new String[] {"良葛格", "毛美眉", "米小狗"}; 
  }
}

傳回的字串陣列，您要填寫(xiě)到下拉選單中，當(dāng)然，首先我們要在dwr.xml中開(kāi)發(fā)這個(gè)物件…

<?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è)…

<!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如下…

window.onload = function() {
    OPT.getOptions(populate);  
};
 
function populate(list){
    DWRUtil.removeAllOptions("opts");
    DWRUtil.addOptions("opts", list);
}

夠簡(jiǎn)單了…不需要解釋了…

看一下結(jié)果…

好啦！我知道有人在說(shuō)了，這個(gè)程式有夠無(wú)聊… Dead

改一下！就是個(gè)不錯(cuò)的範(fàn)例了，例如連動(dòng)方塊，唔！在Ajax in action中叫啥？Dynamic double combo？…

假設(shè)一個(gè)會(huì)去從資料庫(kù)中查詢資料的Java程式示意如下：

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è)定：

<?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è)面：

<!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如下…

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

posted on 2007-04-16 16:28 張金鵬閱讀(252) 評(píng)論(0) 編輯收藏所屬分類: AJAX技術(shù)

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: DWR 入門(mén)與應(yīng)用（三） DWR 入門(mén)與應(yīng)用（二） DWR 入門(mén)與應(yīng)用（一） dwr簡(jiǎn)介把DWR的配置寫(xiě)到Spring的配置文件里（Spring2 新特性-自定義schema初體驗(yàn)） dwr簡(jiǎn)介--一個(gè)例子(續(xù)二) dwr簡(jiǎn)介--一個(gè)例子(續(xù)一) dwr簡(jiǎn)介--一個(gè)例子(一) DWR小結(jié)DWRUtil篇 DWR的學(xué)習(xí)文檔（Hello World,類型轉(zhuǎn)換,Spring,Annotation)

細(xì)心!用心!耐心!

常用鏈接

留言簿(5)

隨筆分類

文章分類

文章檔案

收藏夾

搜索

最新評(píng)論