待辦事項管理 (Part VI)：刪除

第二個範例 (Part VI)：刪除

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

請勿轉貼

看其他教材

---

刪除待辦資料

刪除待辦資料的工作也是分成兩個主要的步驟，而且其步驟跟之前的 add() 和 update() 的程式碼類似：若使用者點選某一項工作，被選擇的工作項目以及 其相關值，會被複製到相對應的輸入欄位（這步驟與 update() 的第一個部分 相同）；然後，等到使用者點選"刪除"按鈕，程式需要把資料從資料庫中刪除， 然後把輸入欄位內的資料清除（清除資料的部分跟 add() 的最後工作相同）。 首先，因為第一個步驟的工作與 update() 相同，因此程式碼不需要做任何 更動。然後，我們需要註冊以及定義使用者點選"刪除"按鈕時的事件處理機制。 在本範例中，該事件會觸發 delete() 方法，所以 我們必須更改刪除的按鈕標籤如下：

<button label="刪除" width="46px" height="24px" onClick="delete()"/>

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

  void delete() {
    evtdao.delete((Event)box.selectedItem.value);
    box.removeItemAt(box.getSelectedIndex());
    clearData();
  }

  void clearData(){
    // 清除輸入欄位
    name.value = null;
    priority.value = null;
    date.value = null;
  }

從程式碼中，我們可以清楚的看出，資料刪除分成三個動作：第一個動作 就是把使用者選擇的 Event 物件從資料庫中刪除（刪除的方式就是利用 DAO 物件 evtdao 的 delete() 方法）；第二個動作就是把使用者選擇的 Event 物件從 待辦事項清單（也就是 Listbox 物件）中刪除，刪除的方式是利用 Listbox 物件 的 getSelectedIndex() 來決定該物件的索引位置，然後利用 removeItemAt(索引位置) 方法把該子節點從 Listbox 物件中刪除；第三個動作就是把輸入欄位的值清除， 由於這一段程式碼跟 add() 重複，為了降低維護成本，我們將這個動作的 三個敘述包成一個 clearData() 方法，然後在 delete() 以及 add() 的最後 呼叫該方法。（請記得將 add() 方法做適當的修改） 以下的執行畫面為將之前 ccc 的資料刪除後的結果：

為了方便起見，我們把整個待辦事項的程式碼列示如下：

<?xml version="1.0" encoding="Big5"?>
<window title="待辦事項列表" width="640px" border="normal" mode="highlighted">
<zscript>
  import java.util.*;
  import java.text.*;

  // 抓取所有待辦事項
  EventDAO evtdao = new EventDAO();
  List allEvents = evtdao.findAll();

  void add() {
    // 從輸入欄位取得資料
    Event newEvt = new Event(UUID.randomUUID().toString(),
                             name.value,priority.value.intValue(),date.value);
    // 將資料新增至資料庫
    evtdao.insert(newEvt);

    // 確保 allEvents 物件有最新的資料
    allEvents = evtdao.findAll();

    // 將新增資料形成一個 Listitem 物件（或者節點） 
    Listitem li = new Listitem(); 
    li.setValue(newEvt);  // 在之後的 update, delete 會用到
    li.appendChild(new Listcell(name.value)); 
    li.appendChild(new Listcell(priority.value.toString())); 
    li.appendChild(new Listcell(new SimpleDateFormat("yyyy-MM-dd").format(date.value))); 

    // 將 Listitem 物件變成 box 的子節點
    // box 是 listbox 的 id 值
    box.appendChild(li);

    // 清除輸入欄位
    clearData();
  }

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

  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);
  }

  void delete(){
    evtdao.delete((Event)box.selectedItem.value);
    box.removeItemAt(box.getSelectedIndex());
    clearData();
  }

  void clearData(){
    // 清除輸入欄位
    name.value = null;
    priority.value = null;
    date.value = null;
  }
</zscript>

  <listbox id="box" multiple="true" rows="4" onSelect="move()">
    <listhead>
      <listheader label="待辦事項" />
      <listheader label="重要性" width="50px" />
      <listheader label="日期" width="90px" />
    </listhead>
    <listitem forEach="${allEvents}" value="${each}">
      <listcell label="${each.name}"/>
      <listcell label="${each.priority}"/>
      <listcell label="${each.date}"/>
    </listitem>
  </listbox>
  <groupbox>
    <caption label="待辦事項管理" />
    待辦事項: <textbox id="name" cols="25" />
    重要性: <intbox id="priority" cols="1" />
    日期: <datebox id="date" cols="8" />
    <button label="新增" width="46px" height="24px" onClick="add()"/>
    <button label="修改" width="46px" height="24px" onClick="update()"/>
    <button label="刪除" width="46px" height="24px" onClick="delete()"/>
  </groupbox>
</window>

---

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