DWR帮助说明－如何编写通用的单行编辑框

也许朋友们会以为这是 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帮助说明－如何编写通用的单行编辑框