也許朋友們會以為這是 DWR 官方 發布的什么幫助，但非常遺憾這不是。現在不少朋友在使用 DWR 開發項目，我也是其中之一，但苦于關于 DWR 的幫助文檔實在太少，很多問題都不得不自己去鉆研 DWR 的源碼才能解決或理解。經過一段時間的苦苦鉆研，總結出那么一點點心得，現在從 DWR 源碼實現的角度詳細講解 DWR 的使用，寫出來與大家分享。今天我談一談如何編寫通用的單行編輯框 。

當我們需要編輯某行數據的時候，可以將該行的數據設置到一個已經設計好的單行編輯框中進行編輯。在編輯完成以后，點擊“保存”按鈕， DWR 可以采用 ajax 的方式訪問服務器，將數據保存到數據庫中。怎樣設計一個單行編輯框呢？讓我們一步一步來完成吧。

1 、設計頁面。

設計好一個單行編輯框的頁面，為值對象中的每一個屬性設計一個數據輸入框，如單行文本框、多行編輯框、下拉框、單選框等等。設計這些數據輸入框的同時應當將它們的 id 設置成與值對象對應的屬性名相同的名稱。這里我想特別說明的是下拉框，因為下拉框中的下拉部分應當是一個從數據庫中查出來的下拉列表。 DWR 為下拉框設計了一個非常便利的函數 addOptions() ，函數 addOptions 的完整寫法如下 ：

    addoptions(eleid, data, valueprop, textprop);
  

? 在該函數中， eleid 是下拉框的 id 。 data 是下拉框需要顯示的下拉列表的數據集，它通常需要包含至少兩行數據，一行是下拉框 value 部分的數據，即需要存數據庫的數據，另一行是下拉框 text 部分的數據，即僅僅用于在下拉列表中顯示的數據。比如，我們有一個選擇部門的下拉框， value 部分對應的應當部門編號，而 text 部分應當是部門名稱。清楚了 data ， valueprop 和 textprop 就好說了， valueprop 就是 value 部分的屬性名， textprop 就是 text 部分的屬性名。因此，寫一個選擇部門的下拉框應當這樣寫：

Js代碼

1. DepartmentBus.findDepartment( ??
2. ???? function (resultset){???? ??
3. ????????addoptions(‘department’,resultset.collection, ??
4. ????????????’departmentId’,’departmentName’);});??

      DepartmentBus.findDepartment(
    function(resultset){    
        addoptions(‘department’,resultset.collection,
            ’departmentId’,’departmentName’);});

    

?? 另外一個關鍵的問題我想特別提一下，就是值對象的主鍵。我在設計 hibernate 的值對象的時候倡導的是使用無意義的主鍵。既然是無意義的主鍵，那么我們不應當將主鍵值展示給用戶。因此我在設計頁面的時候通常是將主鍵對應的標簽設計成一個 hidden 標簽。如果主鍵標簽為空，在提交數據保存的時候， hibernate 將執行插入操作；如果不為空，執行的將是更新操作。因此，通常不需要分別設計插入頁面和更新頁面，可以將它們合二為一（一些因特殊原因必須將插入頁面和更新頁面拆開來編寫的情況應當另當別論）。

2 、設計清除函數

如果你需要設計一個添加功能，則需要顯示一個沒有顯示任何值的空單行編輯框。然而使用 DWR 設計頁面，我們的思維需要發生一個轉變，那就是不要隨便刷新頁面。什么意思呢？當你打開一個單行編輯框添加一條數據并保存以后，又需要添加另一條數據。如果不刷新頁面，則該頁面此時還依然顯示的是上一條數據的內容，我們就需要設計一個頁面清除函數。如果我們在 dwr.xml 文件中是一個一個注冊值對象，那么寫清除函數就非常簡單了。具體編輯如下：

    var department = new Department();
dwr.util.setValues(department);
  

? 第一行產生一個空值對象，第二行使用 setValues() 將頁面清空。

3 、設計編輯函數

當我們在列表顯示框中選擇了某行并點擊“編輯”按鈕以后，需要一個編輯函數將該行的數據設置到單行編輯框中。用 DWR 怎樣設計編輯函數呢？前面提到，在列表顯示框裝載查詢結果集的時候，我們同時也將結果集放置到了一個叫 objCache 頁面端數據緩存中。當用戶點擊“編輯”按鈕時，需要將該行的行好以參數的形式傳遞給編輯函數，然后編輯函數將到 objCache 中取得該行的值對象，最后使用 setValues() 將該值對象設置到單行編輯框中。

4 、設計保存函數

當編輯數據完成以后，點擊“保存”按鈕以后，需要執行一個保存函數來執行保存。在設計保存函數的時候，首先需要從頁面中取出數據并放置到值對象中。為了完成該功能， DWR 提供了 getValues() 函數。在使用該函數的時候，我們必須寫產生一個空值對象，然后將該對象作為參數傳遞給 getValues() ，則頁面中的數據就植入到了該對象中。最后，使用 DWR 的特有方式，調用服務器端的 java 對象中的函數，執行保存。在執行保存的過程這， DWR 還專門提供了事務處理的功能，當然我從來沒有測試過該事務處理的能力。總結保存函數應當如下編寫：

    var department = new Department();    
dwr.util.getValues(department);    
dwr.engine.beginBatch();
DepartmentBus.updateDepartment(department);
dwr.engine.endBatch();
objCache[curid] = obj;
  

? 回顧保存函數，我們可以抽象出部分代碼，以便簡化保存函數的編寫并提高代碼復用度。代碼中的第 2 、 3 、 5 、 6 行都可以抽象成一個通用的函數進行編寫。而代碼中的 1 、 4 行則是個性化的代碼，應當在具體編寫每個功能的時候分別去實現。也就是說保存函數被我分成了通用函數和具體實現函數兩部分，具體的實現見我的示例。

5 、設計刪除函數

當我們在列表顯示框中選擇了某行并點擊“刪除”按鈕的時候，我們需要設計一個刪除函數來刪除該行數據。刪除函數的設計與保存函數的設計比較近似，這里我就不再累贅了，朋友們自己思考吧。

示例： 一個dwr+spring+hibernate的示例

DWR幫助說明－如何編寫通用的單行編輯框