DWR 入門與應用（二）

假設您要從資料庫中查詢出一些字串，然後填寫到表單的下拉選單中。

例如一個示意的Java程式如下：

 onlyfun.caterpillar;
 
 Option 
 String[] getOptions() 

 String[] , , ;

傳回的字串陣列，您要填寫到下拉選單中，當然，首先我們要在dwr.xml中開發這個物件…

<?xml version= encoding=?>
<!DOCTYPE dwr PUBLIC >

<dwr>
  <allow>
    <create creator= javascript=>
        <param name= value=/>
    </create>  
  </allow>
</dwr>

這是我們的網頁…

<!DOCTYPE HTML PUBLIC >
<html>
<head>
<meta http-equiv= content=>
<script src= type=></script>
<script src= type=></script>
<script src= type=></script>
<script src= type=></script>
 
</head>
 
<body>
    選項: <select id=></select>
</body>
</html>

傳回的字串陣列會填入opts這個select中，我們的option.js如下…

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

夠簡單了…不需要解釋了…

看一下結果…
DWR 入門與應用（二）

好啦！我知道有人在說了，這個程式有夠無聊… DWR 入門與應用（二）

改一下！就是個不錯的範例了，例如連動方塊，唔！在Ajax in action中叫啥？Dynamic double combo？…

假設一個會去從資料庫中查詢資料的Java程式示意如下：

 onlyfun.caterpillar;
 
 java.util.Map;
 java.util.TreeMap;
 
 Bike 
   Map<String, String[]> bikes;
  
   Bike() 
    bikes =  TreeMap<String, String[]>();
    bikes.put(,  String[] , , );
    bikes.put(,  String[] , );
    bikes.put(,  String[] , , );
    bikes.put(,  String[] );
    bikes.put(,  String[] , , );
  
  
   String[] getYears() 
    String[] keys =  String[bikes.size()];
     i = 0;
    (String key : bikes.keySet()) 
      keys[i++] = key;
    
     keys; 
  
  
   String[] getBikes(String year) 
     bikes.get(year);

getYears()跟getBkies()分別表示產品的年份跟型號，這邊用Map模擬，實際上資料是來自資料庫的查詢。

一樣的，在dwr.xml中設定：

<?xml version= encoding=?>
<!DOCTYPE dwr PUBLIC >

<dwr>
  <allow>
    <create creator= javascript= scope=>
        <param name= value=/>
    </create>
  </allow>
</dwr>

我們會有個腳踏車年份與型號查詢頁面：

<!DOCTYPE HTML PUBLIC >
<html>
<head>
<meta http-equiv= content=>
<title>Insert title here</title>
  <script type= src=></script>
  <script type= src=></script>
  <script type= src=></script>
  <script type= src=></script>
</head>
<body onload=>
  年份：<select id= onchange=></select><br/><br/>
  型號：<select id=></select><br/>
</body>
</html>

注意，在選完第一個年份後，會觸發onchange事件，接著第二個下拉選單會自動填上對應年份的型號，而不是按鈕按下，再去取得第二個下拉選單，然後refresh...blah...blah...

bike.js如下…

function refreshYearList() 
    Bike.getYears(populateYearList);

 
function populateYearList(list)
    DWRUtil.removeAllOptions();
    DWRUtil.addOptions(, list);
    refreshBikeList();

 
function refreshBikeList() 
    var year = $().value;
    Bike.getBikes(year, populateBikeList);

 
function populateBikeList(list)
    DWRUtil.removeAllOptions();
    DWRUtil.addOptions(, list);

一樣很簡單…

看個無聊的畫面…XD

DWR 入門與應用（二）

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1239538

坏男孩 2007-03-05 11:48 发表评论