引用

邵波的空间 的 Dwr－EditTable完整版
Dwr是Java领域一个著名的服务器端Ajax框架，借助Dwr的帮助，我们可以直接在客户端页面通过Javascript调用远程Java的方法。
　　看Dwr的示例中有一个EditTable的示例，觉得在实际使用中会非常的有用，就把此示例进行了扩展，实现与数据库的交互，在页面上可以直接添加用户、修改用户和删除用户操作。
　　数据库设计：
　　

Java代码

1. create table jackdemo1   
2. (   
3.   id int primary key auto_increment,   
4.   name varchar(50),   
5.   age int,   
6.   address varchar(200)   
7. );   
8.       

create table jackdemo1
(
  id int primary key auto_increment,
  name varchar(50),
  age int,
  address varchar(200)
);
    

　　使用Dwr，首先要配置Web.xml文件：

Java代码

1. <?xml version="1.0" encoding="UTF-8"?>   
2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"  
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee    
5.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">   
6.     <servlet>   
7.         <servlet-name>dwr-invoker</servlet-name>   
8.         <servlet-class>   
9.             org.directwebremoting.servlet.DwrServlet   
10.         </servlet-class>   
11.     </servlet>   
12.     <servlet-mapping>   
13.         <servlet-name>dwr-invoker</servlet-name>   
14.         <url-pattern>/dwr/*</url-pattern>   
15.     </servlet-mapping>   
16. </web-app>  

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 <servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <servlet-class>
   org.directwebremoting.servlet.DwrServlet
  </servlet-class>
 </servlet>
 <servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
 </servlet-mapping>
</web-app>

然后要在web.xml文件同一级目录下建立一个dwr.xml文件，具体的配置如下：

Java代码

1. <!DOCTYPE dwr PUBLIC   
2.     "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"  
3.     "http://getahead.org/dwr/dwr20.dtd">   
4. <dwr>   
5.     <allow>   
6.         <create javascript="People" creator="new">   
7.             <param name="class" value="com.jack.dwr.simple.People"></param>   
8.         </create>   
9.         <convert match="com.jack.dwr.simple.Person" converter="bean" javascript="Person"></convert>   
10.     </allow>   
11. </dwr>  

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "http://getahead.org/dwr/dwr20.dtd">
<dwr>
 <allow>
  <create javascript="People" creator="new">
   <param name="class" value="com.jack.dwr.simple.People"></param>
  </create>
  <convert match="com.jack.dwr.simple.Person" converter="bean" javascript="Person"></convert>
 </allow>
</dwr>

其实Javascript="People"是要在客户端使用的对象名称，<param>是对象的Java类名，因为People类中对应的方法中使用了Person类，所在在这里要使用<convert>进行转换。
Person类是一个POJO类：

Java代码

1. package com.jack.dwr.simple;   
2.   
3.   
4. public class Person {   
5.     private int id;   
6.     private String name;   
7.     private int age;   
8.     private String address;   
9.   
10.     public int getId() {   
11.         return id;   
12.     }   
13.   
14.     public void setId(int id) {   
15.         this.id = id;   
16.     }   
17.   
18.     public String getName() {   
19.         return name;   
20.     }   
21.   
22.     public void setName(String name) {   
23.         this.name = name;   
24.     }   
25.   
26.     public int getAge() {   
27.         return age;   
28.     }   
29.   
30.     public void setAge(int age) {   
31.         this.age = age;   
32.     }   
33.   
34.     public String getAddress() {   
35.         return address;   
36.     }   
37.   
38.     public void setAddress(String address) {   
39.         this.address = address;   
40.     }   
41.   
42. }  

package com.jack.dwr.simple;


public class Person {
 private int id;
 private String name;
 private int age;
 private String address;

 public int getId() {
  return id;
 }

 public void setId(int id) {
  this.id = id;
 }

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public int getAge() {
  return age;
 }

 public void setAge(int age) {
  this.age = age;
 }

 public String getAddress() {
  return address;
 }

 public void setAddress(String address) {
  this.address = address;
 }

}

上面的各个属性对应数据库中的字段信息。
People类是对数据进行操作类也是就是具体的业务类：

Java代码

1. package com.jack.dwr.simple;   
2.   
3. import java.sql.Connection;   
4. import java.sql.PreparedStatement;   
5. import java.sql.ResultSet;   
6. import java.sql.SQLException;   
7. import java.sql.Statement;   
8. import java.util.ArrayList;   
9. import java.util.List;   
10.   
11. /**  
12.  * A container for a set of people  
13.  *   
14.  * @author jackzhangyunjie  
15.  */  
16. public class People {   
17.     private Connection conn;   
18.   
19.     /**  
20.      * 构造函数，同时初始化建立与数据库的连接  
21.      */  
22.     public People() {   
23.         try {   
24.             conn = DBConnection.getConnectionMySqlDB("3306", "jackdemo",   
25.                     "root", "jack");   
26.         } catch (Exception e) {   
27.             e.printStackTrace();   
28.         }   
29.     }   
30.   
31.     /**  
32.      * 删除一个用户  
33.      *   
34.      * @param person  
35.      *            要删除的用户  
36.      *   
37.      */  
38.     public void deletePerson(Person person) throws Exception {   
39.         String sql = "delete from jackdemo1 where id=?";   
40.         PreparedStatement pstmt = conn.prepareStatement(sql);   
41.         pstmt.setInt(1, person.getId());   
42.         //更新数据库操作   
43.         pstmt.executeUpdate();   
44.         //关闭预编译和数据库连接   
45.         pstmt.close();   
46.         conn.close();   
47.     }   
48.   
49.     /**  
50.      * 更新用户信息  
51.      * @param person　要进行更新的用户对象  
52.      * @throws Exception  
53.      */  
54.     public void updatePerson(Person person) throws Exception {   
55.         String sql = "update jackdemo1 set name=?,age=?,address=? where id=?";   
56.         PreparedStatement pstmt = conn.prepareStatement(sql);   
57.         pstmt.setString(1, person.getName());   
58.         pstmt.setInt(2, person.getAge());   
59.         pstmt.setString(3, person.getAddress());   
60.         pstmt.setInt(4, person.getId());   
61.         //更新数据库操作   
62.         pstmt.executeUpdate();   
63.         //关闭预编译和数据库连接   
64.         pstmt.close();   
65.         conn.close();   
66.     }   
67.   
68.     /**  
69.      * 得到全部的人员信息  
70.      *   
71.      * @return 返回一个包含人员的List  
72.      * @throws SQLException  
73.      */  
74.     @SuppressWarnings("unchecked")   
75.     public List getAllPerson() throws SQLException {   
76.         List list = new ArrayList();   
77.         String sql = "select * from jackdemo1";   
78.         Statement st = conn.createStatement();   
79.         //查询数据库，得到所有人员信息   
80.         ResultSet rs = st.executeQuery(sql);   
81.         while (rs.next()) {   
82.             Person person = new Person();   
83.             person.setId(rs.getInt("id"));   
84.             person.setName(rs.getString("name"));   
85.             person.setAge(rs.getInt("age"));   
86.             person.setAddress(rs.getString("address"));   
87.             list.add(person);   
88.         }   
89.         return list;   
90.     }   
91.   
92.     /**  
93.      * 添加人员  
94.      *   
95.      * @param person  
96.      *            要添加的人员的信息  
97.      */  
98.     public void addPerson(Person person) throws Exception {   
99.         String sql = "insert into jackdemo1(name,age,address) values(?,?,?)";   
100.         PreparedStatement pstmt = conn.prepareStatement(sql);   
101.         //设置人员信息   
102.         pstmt.setString(1, person.getName());   
103.         pstmt.setInt(2, person.getAge());   
104.         pstmt.setString(3, person.getAddress());   
105.         //更新数据库操作   
106.         pstmt.executeUpdate();   
107.         //关闭预编译和数据库连接   
108.         pstmt.close();   
109.         conn.close();   
110.     }   
111. }  

package com.jack.dwr.simple;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

/**
 * A container for a set of people
 * 
 * @author jackzhangyunjie
 */
public class People {
 private Connection conn;

 /**
  * 构造函数，同时初始化建立与数据库的连接
  */
 public People() {
  try {
   conn = DBConnection.getConnectionMySqlDB("3306", "jackdemo",
     "root", "jack");
  } catch (Exception e) {
   e.printStackTrace();
  }
 }

 /**
  * 删除一个用户
  * 
  * @param person
  *            要删除的用户
  * 
  */
 public void deletePerson(Person person) throws Exception {
  String sql = "delete from jackdemo1 where id=?";
  PreparedStatement pstmt = conn.prepareStatement(sql);
  pstmt.setInt(1, person.getId());
  //更新数据库操作
  pstmt.executeUpdate();
  //关闭预编译和数据库连接
  pstmt.close();
  conn.close();
 }

 /**
  * 更新用户信息
  * @param person　要进行更新的用户对象
  * @throws Exception
  */
 public void updatePerson(Person person) throws Exception {
  String sql = "update jackdemo1 set name=?,age=?,address=? where id=?";
  PreparedStatement pstmt = conn.prepareStatement(sql);
  pstmt.setString(1, person.getName());
  pstmt.setInt(2, person.getAge());
  pstmt.setString(3, person.getAddress());
  pstmt.setInt(4, person.getId());
  //更新数据库操作
  pstmt.executeUpdate();
  //关闭预编译和数据库连接
  pstmt.close();
  conn.close();
 }

 /**
  * 得到全部的人员信息
  * 
  * @return 返回一个包含人员的List
  * @throws SQLException
  */
 @SuppressWarnings("unchecked")
 public List getAllPerson() throws SQLException {
  List list = new ArrayList();
  String sql = "select * from jackdemo1";
  Statement st = conn.createStatement();
  //查询数据库，得到所有人员信息
  ResultSet rs = st.executeQuery(sql);
  while (rs.next()) {
   Person person = new Person();
   person.setId(rs.getInt("id"));
   person.setName(rs.getString("name"));
   person.setAge(rs.getInt("age"));
   person.setAddress(rs.getString("address"));
   list.add(person);
  }
  return list;
 }

 /**
  * 添加人员
  * 
  * @param person
  *            要添加的人员的信息
  */
 public void addPerson(Person person) throws Exception {
  String sql = "insert into jackdemo1(name,age,address) values(?,?,?)";
  PreparedStatement pstmt = conn.prepareStatement(sql);
  //设置人员信息
  pstmt.setString(1, person.getName());
  pstmt.setInt(2, person.getAge());
  pstmt.setString(3, person.getAddress());
  //更新数据库操作
  pstmt.executeUpdate();
  //关闭预编译和数据库连接
  pstmt.close();
  conn.close();
 }
}

以上就是具体的业务操作信息，其中
DBConnection.getConnectionMySqlDB("3306", "jackdemo","root", "jack")方法用于建立与数据库的连接。
DBConnection是一个数据库连接类：

Java代码

1. package com.jack.dwr.simple;   
2.   
3. import java.sql.Connection;   
4. import java.sql.DriverManager;   
5.   
6. public class DBConnection {   
7.     public static Connection getConnectionMySqlDB(String post, String dbName,String userName,String password)   
8.             throws Exception {   
9.         String driver = "com.mysql.jdbc.Driver";   
10.         String url = "jdbc:mysql://localhost:" + post + "/" + dbName;   
11.         String user = userName;   
12.         String pwd = password;   
13.         Class.forName(driver);   
14.         return DriverManager.getConnection(url, user, pwd);   
15.     }   
16. }  

package com.jack.dwr.simple;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBConnection {
 public static Connection getConnectionMySqlDB(String post, String dbName,String userName,String password)
   throws Exception {
  String driver = "com.mysql.jdbc.Driver";
  String url = "jdbc:mysql://localhost:" + post + "/" + dbName;
  String user = userName;
  String pwd = password;
  Class.forName(driver);
  return DriverManager.getConnection(url, user, pwd);
 }
}

当然你也可以自己扩展别的数据库连接方法。
具体的JSP页面：

Java代码

1. <%@ page language="java" pageEncoding="GBK"%>   
2. <%   
3.     String path = request.getContextPath();   
4. %>   
5.   
6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
7. <html>   
8.     <head>   
9.   
10.         <title>EditTable的完整扩展</title>   
11.         <script type="text/javascript" src="<%=path%>/dwr/util.js"></script>   
12.         <script type="text/javascript" src="<%=path%>/dwr/engine.js"></script>   
13.         <script type="text/javascript"  
14.             src="<%=path%>/dwr/interface/People.js"></script>   
15.         <script type="text/javascript" src="people.js"></script>   
16.     </head>   
17.   
18.     <body onload="init();">   
19.         <div id="tabContents">   
20.             <div id="demoDiv">   
21.                 <h3>   
22.                     All People   
23.                 </h3>   
24.                 <table border="1">   
25.                     <thead>   
26.                         <tr>   
27.                             <th>   
28.                                 IDCode   
29.                             </th>   
30.                             <th>   
31.                                 Person   
32.                             </th>   
33.                             <th>   
34.                                 AGE   
35.                             </th>   
36.                             <th>   
37.                                 ADDRESS   
38.                             </th>   
39.                             <th>   
40.                                 Actions   
41.                             </th>   
42.                         </tr>   
43.                     </thead>   
44.                     <tbody id="peoplebody">   
45.                         <tr id="pattern" style="display: none;">   
46.                             <td>   
47.                                 <span id="tableId">Id</span>   
48.                             </td>   
49.   
50.                             <td>   
51.                                 <span id="tableName">Name</span>   
52.                             </td>   
53.                             <td>   
54.                                 <span id="tableAge">Age</span>   
55.                             </td>   
56.                             <td>   
57.                                 <span id="tableAddress">Address</span>   
58.                             </td>   
59.                             <td>   
60.                                 <input id="edit" type="button" value="Edit" onclick="editClicked(this.id)" />   
61.                                 <input id="delete" type="button" value="Delete"  onclick="deleteClicked(this.id)" />   
62.                             </td>   
63.                         </tr>   
64.                     </tbody>   
65.                 </table>   
66.                 <h3>   
67.                     <input id="add" type="button" value="添加人员" onclick="addPerson();" />   
68.                 </h3>   
69.                 <div id="operation" style="display:none;">   
70.                     <h3>   
71.                     <span id="operationType"></span>   
72.                 </h3>   
73.                 <table class="plain">   
74.                     <tr>   
75.                         <td>   
76.                             Name:   
77.                         </td>   
78.                         <td>   
79.                             <input id="name" type="text" size="30" />   
80.                         </td>   
81.                     </tr>   
82.                     <tr>   
83.                         <td>   
84.                             Age:   
85.                         </td>   
86.                         <td>   
87.                             <input id="age" type="text" size="20" />   
88.                         </td>   
89.                     </tr>   
90.                     <tr>   
91.                         <td>   
92.                             Address:   
93.                         </td>   
94.                         <td>   
95.                             <input type="text" id="address" size="40" />   
96.                         </td>   
97.                     </tr>   
98.                     <tr>   
99.                         <td colspan="2" align="right">   
100.                             <small>(ID=<span id="id">-1</span>)</small>   
101.                             <input type="button" value="Save" onclick="writePerson()" />   
102.                             <input type="button" value="Clear" onclick="clearPerson()" />   
103.                         </td>   
104.                     </tr>   
105.                 </table>   
106.                 </div>   
107.             </div>   
108.     </body>   
109. </html>  

<%@ page language="java" pageEncoding="GBK"%>
<%
 String path = request.getContextPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>

  <title>EditTable的完整扩展</title>
  <script type="text/javascript" src="<%=path%>/dwr/util.js"></script>
  <script type="text/javascript" src="<%=path%>/dwr/engine.js"></script>
  <script type="text/javascript"
   src="<%=path%>/dwr/interface/People.js"></script>
  <script type="text/javascript" src="people.js"></script>
 </head>

 <body onload="init();">
  <div id="tabContents">
   <div id="demoDiv">
    <h3>
     All People
    </h3>
    <table border="1">
     <thead>
      <tr>
       <th>
        IDCode
       </th>
       <th>
        Person
       </th>
       <th>
        AGE
       </th>
       <th>
        ADDRESS
       </th>
       <th>
        Actions
       </th>
      </tr>
     </thead>
     <tbody id="peoplebody">
      <tr id="pattern" style="display: none;">
       <td>
        <span id="tableId">Id</span>
       </td>

       <td>
        <span id="tableName">Name</span>
       </td>
       <td>
        <span id="tableAge">Age</span>
       </td>
       <td>
        <span id="tableAddress">Address</span>
       </td>
       <td>
        <input id="edit" type="button" value="Edit" onclick="editClicked(this.id)" />
        <input id="delete" type="button" value="Delete" onclick="deleteClicked(this.id)" />
       </td>
      </tr>
     </tbody>
    </table>
    <h3>
     <input id="add" type="button" value="添加人员" onclick="addPerson();" />
    </h3>
    <div id="operation" style="display:none;">
     <h3>
     <span id="operationType"></span>
    </h3>
    <table class="plain">
     <tr>
      <td>
       Name:
      </td>
      <td>
       <input id="name" type="text" size="30" />
      </td>
     </tr>
     <tr>
      <td>
       Age:
      </td>
      <td>
       <input id="age" type="text" size="20" />
      </td>
     </tr>
     <tr>
      <td>
       Address:
      </td>
      <td>
       <input type="text" id="address" size="40" />
      </td>
     </tr>
     <tr>
      <td colspan="2" align="right">
       <small>(ID=<span id="id">-1</span>)</small>
       <input type="button" value="Save" onclick="writePerson()" />
       <input type="button" value="Clear" onclick="clearPerson()" />
      </td>
     </tr>
    </table>
    </div>
   </div>
 </body>
</html>

上面是具体的页面信息，people.js信息如下:

Java代码

1.   
2. var peopleCache = {};   
3. var viewed = -1;   
4. var type;   
5. function init() {   
6.     fillTable();   
7. }   
8. function fillTable() {   
9.     People.getAllPerson(function (people) {   
10.         // Delete all the rows except for the "pattern" row   
11.         dwr.util.removeAllRows("peoplebody", {filter:function (tr) {   
12.             return (tr.id != "pattern");   
13.         }});   
14.         // Create a new set cloned from the pattern row   
15.         var person, id;   
16.         people.sort(function (p1, p2) {   
17.             return p1.name.localeCompare(p2.name);   
18.         });   
19.         for (var i = 0; i < people.length; i++) {   
20.             person = people[i];   
21.             id = person.id;   
22.             dwr.util.cloneNode("pattern", {idSuffix:id});   
23.             dwr.util.setValue("tableId" + id, person.id);   
24.             dwr.util.setValue("tableName" + id, person.name);   
25.             dwr.util.setValue("tableAge" + id, person.age);   
26.             dwr.util.setValue("tableAddress" + id, person.address);   
27.             $("pattern" + id).style.display = ""; // officially we should use table-row, but IE prefers "" for some reason   
28.             peopleCache[id] = person;   
29.         }   
30.     });   
31. }   
32. function editClicked(eleid) {   
33. alert(eleid);   
34.     document.getElementById("operation").style.display = "block";   
35.     document.getElementById("operationType").innerHTML = "\u7f16\u8f91\u6570\u636e";   
36.     var person = peopleCache[eleid.substring(4)];   
37.     dwr.util.setValues(person);   
38.     type = "edit";   
39. }   
40. function addPerson() {   
41.     document.getElementById("operation").style.display = "block";   
42.     document.getElementById("operationType").innerHTML = "\u6dfb\u52a0\u6570\u636e";   
43.     dwr.util.setValue("name", "");   
44.     dwr.util.setValue("age", "");   
45.     dwr.util.setValue("address", "");   
46.     dwr.util.setValue("id", "?");   
47.     type = "add";   
48. }   
49. //insert or update Person into database   
50. function writePerson() {   
51.     var person;    
52.     if (type == "add") {   
53.         person = {name:null, age:null, address:null};   
54.         dwr.util.getValues(person);   
55.         dwr.engine.beginBatch();   
56.         People.addPerson(person);   
57.     }else if(type=="edit"){   
58.         person = {id:null,name:null,age:null,address:null};   
59.         dwr.util.getValues(person);   
60.         dwr.engine.beginBatch();   
61.         People.updatePerson(person);   
62.     }   
63.     fillTable();   
64.     dwr.engine.endBatch();   
65.     document.getElementById("operation").style.display = "none";   
66.     dwr.util.setValue("name", "");   
67.     dwr.util.setValue("age", "");   
68.     dwr.util.setValue("address", "");   
69.     dwr.util.setValue("id", "?");   
70. }   
71. //delete person from database   
72. function deleteClicked(eleid) {   
73.     var person = peopleCache[eleid.substring(6)];   
74.     dwr.engine.beginBatch();   
75.     People.deletePerson(person);   
76.     fillTable();   
77.     dwr.engine.endBatch();   
78. }  

var peopleCache = {};
var viewed = -1;
var type;
function init() {
 fillTable();
}
function fillTable() {
 People.getAllPerson(function (people) {
  // Delete all the rows except for the "pattern" row
  dwr.util.removeAllRows("peoplebody", {filter:function (tr) {
   return (tr.id != "pattern");
  }});
  // Create a new set cloned from the pattern row
  var person, id;
  people.sort(function (p1, p2) {
   return p1.name.localeCompare(p2.name);
  });
  for (var i = 0; i < people.length; i++) {
   person = people[i];
   id = person.id;
   dwr.util.cloneNode("pattern", {idSuffix:id});
   dwr.util.setValue("tableId" + id, person.id);
   dwr.util.setValue("tableName" + id, person.name);
   dwr.util.setValue("tableAge" + id, person.age);
   dwr.util.setValue("tableAddress" + id, person.address);
   $("pattern" + id).style.display = ""; // officially we should use table-row, but IE prefers "" for some reason
   peopleCache[id] = person;
  }
 });
}
function editClicked(eleid) {
alert(eleid);
 document.getElementById("operation").style.display = "block";
 document.getElementById("operationType").innerHTML = "\u7f16\u8f91\u6570\u636e";
 var person = peopleCache[eleid.substring(4)];
 dwr.util.setValues(person);
 type = "edit";
}
function addPerson() {
 document.getElementById("operation").style.display = "block";
 document.getElementById("operationType").innerHTML = "\u6dfb\u52a0\u6570\u636e";
 dwr.util.setValue("name", "");
 dwr.util.setValue("age", "");
 dwr.util.setValue("address", "");
 dwr.util.setValue("id", "?");
 type = "add";
}
//insert or update Person into database
function writePerson() {
 var person; 
 if (type == "add") {
  person = {name:null, age:null, address:null};
  dwr.util.getValues(person);
  dwr.engine.beginBatch();
  People.addPerson(person);
 }else if(type=="edit"){
  person = {id:null,name:null,age:null,address:null};
  dwr.util.getValues(person);
  dwr.engine.beginBatch();
  People.updatePerson(person);
 }
 fillTable();
 dwr.engine.endBatch();
 document.getElementById("operation").style.display = "none";
 dwr.util.setValue("name", "");
 dwr.util.setValue("age", "");
 dwr.util.setValue("address", "");
 dwr.util.setValue("id", "?");
}
//delete person from database
function deleteClicked(eleid) {
 var person = peopleCache[eleid.substring(6)];
 dwr.engine.beginBatch();
 People.deletePerson(person);
 fillTable();
 dwr.engine.endBatch();
}

以上就是全部的扩展内容。也可以通过附件下载运行看看效果。