知识点：
编写要在前台调用的java对象；
在dwr.xml中配置这个对象；
在页面中引入dwr的js库及自动生成的调用java对象的js库
dwr.util中常用的js函数以快速开发。
四DWR综合实践：用户管理模块实现
1.userManager.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link rel="stylesheet" type="text/css" href="generic.css" />
<title>DWR示例：用户管理 蓝杰信息@NetJava.cn</title>
</head>
<!--引入dwr的js脚本-->
<script src="dwr/interface/UserManger.js"></script>
<script src="dwr/engine.js" /></script>
<script src="dwr/util.js" /></script>
<script type="text/javascript">
//填充用户区域下拉表---DWR调用
function fillSelectUserArea(){
UserManger.getAreaMap(callBackFSU);
}
//填充用户区域下拉表DWR调用的回调方法
var callBackFSU=function(areaList){//()是上面调用方法的返回值Map
DWRUtil.removeAllOptions("selectUserArea");
dwr中可以自动将java的Map对象中的键和值转化为html select组件中的option
DWRUtil.addOptions("selectUserArea", areaList);
};
//根据selectUserArea组件选择值调用填充表格的函数
function displayselectUserArea(sua){
// alert("选中的值是: "+sua.value);
fillTable(sua.value);
}
//从服务器上取取用户数据集合填充表格---DWR调用
function fillTable(theAreaID){
if(theAreaID==null){
theAreaID=dwr.util.getValue("selectUserArea");
}
UserManger.getUserByAreaID(theAreaID,callBack);
}
//定义一个数组，用以缓存表中的用户信息
var userCache = { };
//提取用户列表的回设函数：userList中放的是用户象
var callBack=function(userList) {
// Delete all the rows
dwr.util.removeAllRows("userTable");
document.getElementById("editDiv").style.visibility ='hidden';
//alert("返回用户列表长度是："+userList.length);
//取得html中表格对象
var dtable = document.getElementById("userTable");
for (var i = 0; i < userList.length; i++)
{
theUser = userList[i];
//在table中新建一行
var elTr = dtable.insertRow( -1 );
//注意这句：标识以后面删除时dom对象的唯一ID
var userTableRowID=i*1000;
elTr.setAttribute("id", userTableRowID);
//创建id列:
var idTd = elTr.insertCell( -1 );
idTd.innerHTML = theUser.id;
//创建areaID列
var areaTd = elTr.insertCell( -1 );
areaTd.innerHTML = theUser.areaID;
//创建name列
var nameTd = elTr.insertCell( -1 );
nameTd.innerHTML = theUser.name;
//创建name列
var fixFeeTd = elTr.insertCell( -1 );
fixFeeTd.innerHTML = theUser.fixFee;
// alert(theUser);
//创建编辑
var editTd = elTr.insertCell( -1 );
var editBTN="<input type=/"button/" value=/"修改/" οnclick=/"editUser
("+theUser.id+");/"/>";//一排写完，要不然出错
var deleteBTN="<input type=/"button/" value=/"删除/" οnclick=/"deleteUser
("+theUser.id+","+userTableRowID+");/"/>";//一排写完，要不然出错
editTd.innerHTML =editBTN +" "+deleteBTN;
//将用户保存到缓存中
userCache[theUser.id] = theUser;
}
};
//修改某个用户的事件处理:参数为用户ID
function editUser(userID){
document.getElementById("editDiv").style.visibility ='visible';
var user = userCache[userID];
alert("要修改的用户是: "+user.id);
dwr.util.setValues({spanuserid:user.id,iptname:user.name,
iptarea:user.areaID,iptfixFee:user.fixFee});
}
//删除某个用户的事件处理---DWR调用
function deleteUser(userID,userTableRowID) {
alert("要修改的用户ＩＤ是: "+userID+"表中的行ＩＤ是: "+userTableRowID);
var user = userCache[userID];
if (confirm("Are you sure you want to delete " + user.name + "?")) {
var rowToDelete = document.getElementById(userTableRowID);
var userTable = document.getElementById("userTable");
//从表格中移除用户数据行
userTable.removeChild(rowToDelete);
UserManger.deleteUser(userID);
}
}
//更新用户事件处理---DWR调用
function updateUser() {
//创建一个js中的UserInfo对象，发送给服务器
var user=new Object();
user.id=dwr.util.getValue("spanuserid");
user.areaID=dwr.util.getValue("iptarea");
user.name=dwr.util.getValue("iptname");
user.fixFee=dwr.util.getValue("iptfixFee");
window.alert("要修改的用户ＩＤ为: "+user.id);
UserManger.updateUser(user,callbackForUDUser);
}
//更新用户的回调函数
var callbackForUDUser=function(result){
if(result){
fillTable();
window.alert("用户信息保存成功!");
}else{
window.alert("用户信息保存失败!");
}
};
//清除输入框中的用户数据
function clearUserInput() {
dwr.util.setValues({spanuserid:null,iptname:null,iptarea:null, iptfixFee:null});
}
</script>
<body οnlοad="fillSelectUserArea();">
<pre>
根据区域提取未处理客户：<select id="selectUserArea" οnchange="displayselectUserArea
(this)"></select>
<table border="2">
<thead>
<tr>
<th>序号</th>
<th>所属地区</th>
<th>用户名</th>
<th>消费额度</th>
<th>操 作</th>
</tr>
</thead>
<tbody id="userTable">
</tbody>
</table>
<!-- 初始设为不可见 -->
<div id="editDiv" style="visibility:hidden">
用户序号：<span id="spanuserid"> </span>
用户名字：<input id="iptname" type="text" size="10" />
所属地区：<input id="iptarea" type="text" size="10" />
用户额度：<input id="iptfixFee" type="text" size="10" />
<br>
<input type="button" value="保 存" οnclick="updateUser()" />
<input type="button" value="清 空" οnclick="clearPerson()"
/>
</div>
</pre>
</body>
2. UserManager.java
package cn.netjava.dwr;
import java.util.*;
/**
* 用户管理理：为dwr前端调用提供
*
* @author www.NetJava.cn
*/
public class UserManger {
// 取得用户的地区域列表:Map中为 区域ＩＤ：区域名
public Map getAreaMap() {
return areaMap;
}
// 根据地区代号提取用户列表
public List<UserInfo> getUserByAreaID(int areaID) {
System.out.println("AreaID : " + areaID);
List<UserInfo> userList = new ArrayList();
// 模拟生成用户列表
int count = new java.util.Random().nextInt(5) + 4;
for (int i = 1; i <= count; i++) {
userID++;
UserInfo us = new UserInfo();
us.setId(userID);
us.setAreaID(areaID);
us.setName("第" + userID + "个用户");
us.setFixFee(100 * i);
userList.add(us);
}
return userList;
}
// 以下方法模拟增、改、存用户到数据库
public boolean updateUser(UserInfo user) {
System.out.println("updateUser OK: " + user.toString());
return true;
}
// 根据用户id删除用户
public boolean deleteUser(int id) {
System.out.println("deleteUser OK: ID" + id);
return true;
}
// 区域列表，在类装载时初始化
private static Map areaMap = new HashMap();
static {
for (int i = 0; i < 5; i++) {
areaMap.put(1, "芙蓉区");
areaMap.put(2, "红旗区");
areaMap.put(3, "雨花区");
areaMap.put(4, "开福区");
areaMap.put(5, "岳麓区");
}
}
// 用与生成用户唯一ＩＤ
private static int userID = 0;
}
____________________________
UserInfo.java
package cn.netjava.dwr;
/**
* 用于DWR在前台展示的用户对象
* @author www.NetJava.cn
*/
public class UserInfo
{
private int id;
private int areaID;
private String name;
private int fixFee;
//getter setter id areaID..
...
}
3. web.xml与上节都一样
web-inf/dwr.xml
<dwr>
<allow>
<!-- 用户管理 cn.netjava.dwr.UserManager.java让js调用 -->
<create creator="new" javascript="UserManger" scope="script">
<param name="class" value="cn.netjava.dwr.UserManger"/>
</create>
<convert match="cn.netjava.dwr.UserInfo" converter="bean"/>
</allow>
</dwr>
4.dwr.jar
附件：csdn空间4/netJavaDWR(用户管理模块).rar
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
