待辦事項管理 (Part V)：修改

第二個範例 (Part V)：修改

The following examples had been tested on Mozilla's Firefox and Microsoft's IE. The document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

看其他教材

---

修改待辦資料

修改待辦資料分成兩個主要的步驟：若使用者點選某一項工作，被選擇的工作項目以及 其相關值，會被複製到相對應的輸入欄位；然後，等到使用者修改完資料後，使用者 需要按"修改"按鈕來完成修改工作。 首先，我們要為 <listbox> 註冊一個 onSelect 的事件處理方法 move()； 該註冊的事件處理過程為：一旦使用者選擇了（也就是 onSelect）<listbox> 中的某一個待辦事項，ZK 開始執行 move() 方法，而該方法所做的事情就是把 該待辦事項的值分別複製到相對應的輸入欄位。註冊的原始碼如下：

<listbox id="box" multiple="true" rows="4" onSelect="move()">

而 move() 的程式碼定義如下：

void move(){
  name.value = ((Event)box.selectedItem.value).getName();
  priority.value = ((Event)box.selectedItem.value).getPriority(); 
  date.value = ((Event)box.selectedItem.value).getDate(); 
}

這一段程式碼中，綠色的部分需要特別說明一下：在之前介紹 forEach 和 add() 方法中，我們曾經說過，有一行程式碼（li.setValue(newEvt);） 是在 add() 中沒有特別用途，但是卻對 update 或者 delete 有幫助的； 這一行程式碼基本上是為 Listitem 物件的 value 屬性設定一個屬性值，而該值 是該 Listitem 所代表的待辦事項物件（即 Event）。經過這樣的設定，在 move() 方法中，我們就可以經由 box.selectedItem.value 的方式取得被使用者 點選的 Listitem 物件中的 Event 物件；由於 .value 傳回的是 Object 物件， 因此需要將它強迫轉型為 Event。有了 Event 物件之後，我們就可以經由其相關的 accessor 方法（getName()、getPriority()、getDate()）取得值，並將其指定給 輸入欄位 name、priority、和 date。在這裡，我們先測試一下目前的工作是否 正確，以下的執行畫面是在點選待辦事項 aaa 之後的結果，請留意輸入欄位內的值：

在確定上一個步驟的正確性之後，使用者可以在輸入欄位內做必要的修改。 使用者在修正完必要的資料後，按下"修改"按鈕，這會觸發一個事件， 因此我們需要定義一個該事件的處理方法，在本範例中稱之為 update()。 我們必須更改修改的按鈕標籤如下：

<button label="修改" width="46px" height="24px" onClick="update()"/>

跟其他 Java 程式相同，請在 <zscript> 標籤內加入 update() 方法如下：

  // update()
  void update(){
    // 修改待辦事項物件的內容以及資料庫的內容
    Event editEvt = (Event) box.selectedItem.value;
    editEvt.setName(name.value);
    editEvt.setPriority(priority.value);
    editEvt.setDate(date.value);
    evtdao.update(editEvt);

    // 修改 listbox 的內容
    List children = box.selectedItem.children;
    ((Listcell)children.get(0)).label = name.value;
    ((Listcell)children.get(1)).label = priority.value.toString();
    ((Listcell)children.get(2)).label = new SimpleDateFormat("yyyy-MM-dd").format(date.value); 
  }

跟 add() 類似，update() 方法中的第一件事情就是從輸入欄位取得資料；這個可以 從程式碼中的 name.value、priority.value、和 date.value 可以看的出來。 取出的資料要用來修改被使用者選取的 Event 物件，也就是 box.selectedItem.value 的值；再經由該物件的 mutator 方法（setName()、setPriority()、和 setDate()）來更新該物件的內容；等到 editEvt 更新之後，我們就可以利用 DAO 物件 evtdao 的 update() 方法來更新資料庫。 最後，輸入欄位內的資料必須覆蓋到待辦事項清單中之前被使用者選擇的待辦事項。 從上列的"修改 listbox 的內容"的那一段程式碼，我們可以看到程式利用 box.selectedItem.children 取得使用者選擇的待辦事項的所有子節點； 在本範例中，總共會有三個 Listcell 的子節點。然後，程式利用 children.get(0) 取得第一個子節點，然後轉型為 Listcell 物件，最後利用 .label 取得該物件 的 label 屬性，並以輸入欄位的值來取代 label 的屬性值。 以下的執行畫面為將之前 aaa 的資料改成 ccc 的結果：

---

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu