隨筆 - 20 
文章 - 2 
trackbacks - 0


           
	

          

          
	
		
          
			
          
	
          
		
          <2009年3月>
          
	
          日一二三四五六
          22232425262728
          1234567
          891011121314
          15161718192021
          22232425262728
          2930311234
          

          

          
			
			

          常用鏈接
          


          留言簿(1)
          




		
          隨筆檔案
          
		
				
			
	
		
          相冊
          
		
				
			
	




          搜索
          

            
	
          • 
		
          •  
	
            • 

          


          最新評論
	
          



          閱讀排行榜
          



          評論排行榜
          


          		
	

          

          
	
					


          
	
	
           
          

          引用
          

          邵波的空間 的 Dwr－EditTable完整版
          Dwr是Java領域一個著名的服務器端Ajax框架，借助Dwr的幫助，我們可以直接在客戶端頁面通過Javascript調用遠程Java的方法。 
          　　看Dwr的示例中有一個EditTable的示例，覺得在實際使用中會非常的有用，就把此示例進行了擴展，實現與數據庫的交互，在頁面上可以直接添加用戶、修改用戶和刪除用戶操作。 
          　　數據庫設計： 
          　　 

          

          

          Java代碼 復制代碼
          

            

          1. create table jackdemo1   
            2. 

          2. (   
            3. 

          3.   id int primary key auto_increment,   
            4. 

          4.   name varchar(50),   
            5. 

          5.   age int,   
            6. 

          6.   address varchar(200)   
            7. 

          7. );   
            8. 

          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. 

          2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"  
            3. 

          3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
            4. 

          4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee    
            5. 

          5.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">   
            6. 

          6.     <servlet>   
            7. 

          7.         <servlet-name>dwr-invoker</servlet-name>   
            8. 

          8.         <servlet-class>   
            9. 

          9.             org.directwebremoting.servlet.DwrServlet   
            10. 

          10.         </servlet-class>   
            11. 

          11.     </servlet>   
            12. 

          12.     <servlet-mapping>   
            13. 

          13.         <servlet-name>dwr-invoker</servlet-name>   
            14. 

          14.         <url-pattern>/dwr/*</url-pattern>   
            15. 

          15.     </servlet-mapping>   
            16. 

          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. 

          2.     "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"  
            3. 

          3.     "http://getahead.org/dwr/dwr20.dtd">   
            4. 

          4. <dwr>   
            5. 

          5.     <allow>   
            6. 

          6.         <create javascript="People" creator="new">   
            7. 

          7.             <param name="class" value="com.jack.dwr.simple.People"></param>   
            8. 

          8.         </create>   
            9. 

          9.         <convert match="com.jack.dwr.simple.Person" converter="bean" javascript="Person"></convert>   
            10. 

          10.     </allow>   
            11. 

          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. 

          2.   
            3. 

          3.   
            4. 

          4. public class Person {   
            5. 

          5.     private int id;   
            6. 

          6.     private String name;   
            7. 

          7.     private int age;   
            8. 

          8.     private String address;   
            9. 

          9.   
            10. 

          10.     public int getId() {   
            11. 

          11.         return id;   
            12. 

          12.     }   
            13. 

          13.   
            14. 

          14.     public void setId(int id) {   
            15. 

          15.         this.id = id;   
            16. 

          16.     }   
            17. 

          17.   
            18. 

          18.     public String getName() {   
            19. 

          19.         return name;   
            20. 

          20.     }   
            21. 

          21.   
            22. 

          22.     public void setName(String name) {   
            23. 

          23.         this.name = name;   
            24. 

          24.     }   
            25. 

          25.   
            26. 

          26.     public int getAge() {   
            27. 

          27.         return age;   
            28. 

          28.     }   
            29. 

          29.   
            30. 

          30.     public void setAge(int age) {   
            31. 

          31.         this.age = age;   
            32. 

          32.     }   
            33. 

          33.   
            34. 

          34.     public String getAddress() {   
            35. 

          35.         return address;   
            36. 

          36.     }   
            37. 

          37.   
            38. 

          38.     public void setAddress(String address) {   
            39. 

          39.         this.address = address;   
            40. 

          40.     }   
            41. 

          41.   
            42. 

          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. 

          2.   
            3. 

          3. import java.sql.Connection;   
            4. 

          4. import java.sql.PreparedStatement;   
            5. 

          5. import java.sql.ResultSet;   
            6. 

          6. import java.sql.SQLException;   
            7. 

          7. import java.sql.Statement;   
            8. 

          8. import java.util.ArrayList;   
            9. 

          9. import java.util.List;   
            10. 

          10.   
            11. 

          11. /**  
            12. 

          12.  * A container for a set of people  
            13. 

          13.  *   
            14. 

          14.  * @author jackzhangyunjie  
            15. 

          15.  */  
            16. 

          16. public class People {   
            17. 

          17.     private Connection conn;   
            18. 

          18.   
            19. 

          19.     /**  
            20. 

          20.      * 構造函數，同時初始化建立與數據庫的連接  
            21. 

          21.      */  
            22. 

          22.     public People() {   
            23. 

          23.         try {   
            24. 

          24.             conn = DBConnection.getConnectionMySqlDB("3306", "jackdemo",   
            25. 

          25.                     "root", "jack");   
            26. 

          26.         } catch (Exception e) {   
            27. 

          27.             e.printStackTrace();   
            28. 

          28.         }   
            29. 

          29.     }   
            30. 

          30.   
            31. 

          31.     /**  
            32. 

          32.      * 刪除一個用戶  
            33. 

          33.      *   
            34. 

          34.      * @param person  
            35. 

          35.      *            要刪除的用戶  
            36. 

          36.      *   
            37. 

          37.      */  
            38. 

          38.     public void deletePerson(Person person) throws Exception {   
            39. 

          39.         String sql = "delete from jackdemo1 where id=?";   
            40. 

          40.         PreparedStatement pstmt = conn.prepareStatement(sql);   
            41. 

          41.         pstmt.setInt(1, person.getId());   
            42. 

          42.         //更新數據庫操作   
            43. 

          43.         pstmt.executeUpdate();   
            44. 

          44.         //關閉預編譯和數據庫連接   
            45. 

          45.         pstmt.close();   
            46. 

          46.         conn.close();   
            47. 

          47.     }   
            48. 

          48.   
            49. 

          49.     /**  
            50. 

          50.      * 更新用戶信息  
            51. 

          51.      * @param person　要進行更新的用戶對象  
            52. 

          52.      * @throws Exception  
            53. 

          53.      */  
            54. 

          54.     public void updatePerson(Person person) throws Exception {   
            55. 

          55.         String sql = "update jackdemo1 set name=?,age=?,address=? where id=?";   
            56. 

          56.         PreparedStatement pstmt = conn.prepareStatement(sql);   
            57. 

          57.         pstmt.setString(1, person.getName());   
            58. 

          58.         pstmt.setInt(2, person.getAge());   
            59. 

          59.         pstmt.setString(3, person.getAddress());   
            60. 

          60.         pstmt.setInt(4, person.getId());   
            61. 

          61.         //更新數據庫操作   
            62. 

          62.         pstmt.executeUpdate();   
            63. 

          63.         //關閉預編譯和數據庫連接   
            64. 

          64.         pstmt.close();   
            65. 

          65.         conn.close();   
            66. 

          66.     }   
            67. 

          67.   
            68. 

          68.     /**  
            69. 

          69.      * 得到全部的人員信息  
            70. 

          70.      *   
            71. 

          71.      * @return 返回一個包含人員的List  
            72. 

          72.      * @throws SQLException  
            73. 

          73.      */  
            74. 

          74.     @SuppressWarnings("unchecked")   
            75. 

          75.     public List getAllPerson() throws SQLException {   
            76. 

          76.         List list = new ArrayList();   
            77. 

          77.         String sql = "select * from jackdemo1";   
            78. 

          78.         Statement st = conn.createStatement();   
            79. 

          79.         //查詢數據庫，得到所有人員信息   
            80. 

          80.         ResultSet rs = st.executeQuery(sql);   
            81. 

          81.         while (rs.next()) {   
            82. 

          82.             Person person = new Person();   
            83. 

          83.             person.setId(rs.getInt("id"));   
            84. 

          84.             person.setName(rs.getString("name"));   
            85. 

          85.             person.setAge(rs.getInt("age"));   
            86. 

          86.             person.setAddress(rs.getString("address"));   
            87. 

          87.             list.add(person);   
            88. 

          88.         }   
            89. 

          89.         return list;   
            90. 

          90.     }   
            91. 

          91.   
            92. 

          92.     /**  
            93. 

          93.      * 添加人員  
            94. 

          94.      *   
            95. 

          95.      * @param person  
            96. 

          96.      *            要添加的人員的信息  
            97. 

          97.      */  
            98. 

          98.     public void addPerson(Person person) throws Exception {   
            99. 

          99.         String sql = "insert into jackdemo1(name,age,address) values(?,?,?)";   
            100. 

          100.         PreparedStatement pstmt = conn.prepareStatement(sql);   
            101. 

          101.         //設置人員信息   
            102. 

          102.         pstmt.setString(1, person.getName());   
            103. 

          103.         pstmt.setInt(2, person.getAge());   
            104. 

          104.         pstmt.setString(3, person.getAddress());   
            105. 

          105.         //更新數據庫操作   
            106. 

          106.         pstmt.executeUpdate();   
            107. 

          107.         //關閉預編譯和數據庫連接   
            108. 

          108.         pstmt.close();   
            109. 

          109.         conn.close();   
            110. 

          110.     }   
            111. 

          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. 

          2.   
            3. 

          3. import java.sql.Connection;   
            4. 

          4. import java.sql.DriverManager;   
            5. 

          5.   
            6. 

          6. public class DBConnection {   
            7. 

          7.     public static Connection getConnectionMySqlDB(String post, String dbName,String userName,String password)   
            8. 

          8.             throws Exception {   
            9. 

          9.         String driver = "com.mysql.jdbc.Driver";   
            10. 

          10.         String url = "jdbc:mysql://localhost:" + post + "/" + dbName;   
            11. 

          11.         String user = userName;   
            12. 

          12.         String pwd = password;   
            13. 

          13.         Class.forName(driver);   
            14. 

          14.         return DriverManager.getConnection(url, user, pwd);   
            15. 

          15.     }   
            16. 

          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. 

          2. <%   
            3. 

          3.     String path = request.getContextPath();   
            4. 

          4. %>   
            5. 

          5.   
            6. 

          6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
            7. 

          7. <html>   
            8. 

          8.     <head>   
            9. 

          9.   
            10. 

          10.         <title>EditTable的完整擴展</title>   
            11. 

          11.         <script type="text/javascript" src="<%=path%>/dwr/util.js"></script>   
            12. 

          12.         <script type="text/javascript" src="<%=path%>/dwr/engine.js"></script>   
            13. 

          13.         <script type="text/javascript"  
            14. 

          14.             src="<%=path%>/dwr/interface/People.js"></script>   
            15. 

          15.         <script type="text/javascript" src="people.js"></script>   
            16. 

          16.     </head>   
            17. 

          17.   
            18. 

          18.     <body onload="init();">   
            19. 

          19.         <div id="tabContents">   
            20. 

          20.             <div id="demoDiv">   
            21. 

          21.                 <h3>   
            22. 

          22.                     All People   
            23. 

          23.                 </h3>   
            24. 

          24.                 <table border="1">   
            25. 

          25.                     <thead>   
            26. 

          26.                         <tr>   
            27. 

          27.                             <th>   
            28. 

          28.                                 IDCode   
            29. 

          29.                             </th>   
            30. 

          30.                             <th>   
            31. 

          31.                                 Person   
            32. 

          32.                             </th>   
            33. 

          33.                             <th>   
            34. 

          34.                                 AGE   
            35. 

          35.                             </th>   
            36. 

          36.                             <th>   
            37. 

          37.                                 ADDRESS   
            38. 

          38.                             </th>   
            39. 

          39.                             <th>   
            40. 

          40.                                 Actions   
            41. 

          41.                             </th>   
            42. 

          42.                         </tr>   
            43. 

          43.                     </thead>   
            44. 

          44.                     <tbody id="peoplebody">   
            45. 

          45.                         <tr id="pattern" style="display: none;">   
            46. 

          46.                             <td>   
            47. 

          47.                                 <span id="tableId">Id</span>   
            48. 

          48.                             </td>   
            49. 

          49.   
            50. 

          50.                             <td>   
            51. 

          51.                                 <span id="tableName">Name</span>   
            52. 

          52.                             </td>   
            53. 

          53.                             <td>   
            54. 

          54.                                 <span id="tableAge">Age</span>   
            55. 

          55.                             </td>   
            56. 

          56.                             <td>   
            57. 

          57.                                 <span id="tableAddress">Address</span>   
            58. 

          58.                             </td>   
            59. 

          59.                             <td>   
            60. 

          60.                                 <input id="edit" type="button" value="Edit" onclick="editClicked(this.id)" />   
            61. 

          61.                                 <input id="delete" type="button" value="Delete"  onclick="deleteClicked(this.id)" />   
            62. 

          62.                             </td>   
            63. 

          63.                         </tr>   
            64. 

          64.                     </tbody>   
            65. 

          65.                 </table>   
            66. 

          66.                 <h3>   
            67. 

          67.                     <input id="add" type="button" value="添加人員" onclick="addPerson();" />   
            68. 

          68.                 </h3>   
            69. 

          69.                 <div id="operation" style="display:none;">   
            70. 

          70.                     <h3>   
            71. 

          71.                     <span id="operationType"></span>   
            72. 

          72.                 </h3>   
            73. 

          73.                 <table class="plain">   
            74. 

          74.                     <tr>   
            75. 

          75.                         <td>   
            76. 

          76.                             Name:   
            77. 

          77.                         </td>   
            78. 

          78.                         <td>   
            79. 

          79.                             <input id="name" type="text" size="30" />   
            80. 

          80.                         </td>   
            81. 

          81.                     </tr>   
            82. 

          82.                     <tr>   
            83. 

          83.                         <td>   
            84. 

          84.                             Age:   
            85. 

          85.                         </td>   
            86. 

          86.                         <td>   
            87. 

          87.                             <input id="age" type="text" size="20" />   
            88. 

          88.                         </td>   
            89. 

          89.                     </tr>   
            90. 

          90.                     <tr>   
            91. 

          91.                         <td>   
            92. 

          92.                             Address:   
            93. 

          93.                         </td>   
            94. 

          94.                         <td>   
            95. 

          95.                             <input type="text" id="address" size="40" />   
            96. 

          96.                         </td>   
            97. 

          97.                     </tr>   
            98. 

          98.                     <tr>   
            99. 

          99.                         <td colspan="2" align="right">   
            100. 

          100.                             <small>(ID=<span id="id">-1</span>)</small>   
            101. 

          101.                             <input type="button" value="Save" onclick="writePerson()" />   
            102. 

          102.                             <input type="button" value="Clear" onclick="clearPerson()" />   
            103. 

          103.                         </td>   
            104. 

          104.                     </tr>   
            105. 

          105.                 </table>   
            106. 

          106.                 </div>   
            107. 

          107.             </div>   
            108. 

          108.     </body>   
            109. 

          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. 

          2. var peopleCache = {};   
            3. 

          3. var viewed = -1;   
            4. 

          4. var type;   
            5. 

          5. function init() {   
            6. 

          6.     fillTable();   
            7. 

          7. }   
            8. 

          8. function fillTable() {   
            9. 

          9.     People.getAllPerson(function (people) {   
            10. 

          10.         // Delete all the rows except for the "pattern" row   
            11. 

          11.         dwr.util.removeAllRows("peoplebody", {filter:function (tr) {   
            12. 

          12.             return (tr.id != "pattern");   
            13. 

          13.         }});   
            14. 

          14.         // Create a new set cloned from the pattern row   
            15. 

          15.         var person, id;   
            16. 

          16.         people.sort(function (p1, p2) {   
            17. 

          17.             return p1.name.localeCompare(p2.name);   
            18. 

          18.         });   
            19. 

          19.         for (var i = 0; i < people.length; i++) {   
            20. 

          20.             person = people[i];   
            21. 

          21.             id = person.id;   
            22. 

          22.             dwr.util.cloneNode("pattern", {idSuffix:id});   
            23. 

          23.             dwr.util.setValue("tableId" + id, person.id);   
            24. 

          24.             dwr.util.setValue("tableName" + id, person.name);   
            25. 

          25.             dwr.util.setValue("tableAge" + id, person.age);   
            26. 

          26.             dwr.util.setValue("tableAddress" + id, person.address);   
            27. 

          27.             $("pattern" + id).style.display = ""; // officially we should use table-row, but IE prefers "" for some reason   
            28. 

          28.             peopleCache[id] = person;   
            29. 

          29.         }   
            30. 

          30.     });   
            31. 

          31. }   
            32. 

          32. function editClicked(eleid) {   
            33. 

          33. alert(eleid);   
            34. 

          34.     document.getElementById("operation").style.display = "block";   
            35. 

          35.     document.getElementById("operationType").innerHTML = "\u7f16\u8f91\u6570\u636e";   
            36. 

          36.     var person = peopleCache[eleid.substring(4)];   
            37. 

          37.     dwr.util.setValues(person);   
            38. 

          38.     type = "edit";   
            39. 

          39. }   
            40. 

          40. function addPerson() {   
            41. 

          41.     document.getElementById("operation").style.display = "block";   
            42. 

          42.     document.getElementById("operationType").innerHTML = "\u6dfb\u52a0\u6570\u636e";   
            43. 

          43.     dwr.util.setValue("name", "");   
            44. 

          44.     dwr.util.setValue("age", "");   
            45. 

          45.     dwr.util.setValue("address", "");   
            46. 

          46.     dwr.util.setValue("id", "?");   
            47. 

          47.     type = "add";   
            48. 

          48. }   
            49. 

          49. //insert or update Person into database   
            50. 

          50. function writePerson() {   
            51. 

          51.     var person;    
            52. 

          52.     if (type == "add") {   
            53. 

          53.         person = {name:null, age:null, address:null};   
            54. 

          54.         dwr.util.getValues(person);   
            55. 

          55.         dwr.engine.beginBatch();   
            56. 

          56.         People.addPerson(person);   
            57. 

          57.     }else if(type=="edit"){   
            58. 

          58.         person = {id:null,name:null,age:null,address:null};   
            59. 

          59.         dwr.util.getValues(person);   
            60. 

          60.         dwr.engine.beginBatch();   
            61. 

          61.         People.updatePerson(person);   
            62. 

          62.     }   
            63. 

          63.     fillTable();   
            64. 

          64.     dwr.engine.endBatch();   
            65. 

          65.     document.getElementById("operation").style.display = "none";   
            66. 

          66.     dwr.util.setValue("name", "");   
            67. 

          67.     dwr.util.setValue("age", "");   
            68. 

          68.     dwr.util.setValue("address", "");   
            69. 

          69.     dwr.util.setValue("id", "?");   
            70. 

          70. }   
            71. 

          71. //delete person from database   
            72. 

          72. function deleteClicked(eleid) {   
            73. 

          73.     var person = peopleCache[eleid.substring(6)];   
            74. 

          74.     dwr.engine.beginBatch();   
            75. 

          75.     People.deletePerson(person);   
            76. 

          76.     fillTable();   
            77. 

          77.     dwr.engine.endBatch();   
            78. 

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



          以上就是全部的擴展內容。也可以通過附件下載運行看看效果。 

          文章來源:http://wxq594808632.blog.163.com/blog/static/10907975520092191026285
	
          posted on 2009-03-19 13:00 武志強 閱讀(255) 評論(0)  編輯  收藏  
          

          







          
	    
    




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
	



          



    







          
        
	




主站蜘蛛池模板：
武隆县|
玉溪市|
富民县|
泰宁县|
安徽省|
东乌|
云和县|
读书|
阳泉市|
灵山县|
枞阳县|
博白县|
景洪市|
育儿|
阿拉善右旗|
罗甸县|
喀喇沁旗|
邹城市|
萨迦县|
金沙县|
德格县|
和平县|
嘉祥县|
孝感市|
肥城市|
临安市|
酉阳|
县级市|
仙桃市|
常熟市|
固原市|
湘阴县|
铅山县|
故城县|
娄底市|
黄大仙区|
宁化县|
察隅县|
芜湖市|
凭祥市|
博客|