您的位置：首页 > 其它

dwr返回list并以table动态显示

2011-03-01 21:09 549 查看
首先在eclipse里新建一个web项目，并引入dwr.jar和common—logging.jar，接着开始写代码吧

web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>

<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>


dwr.xml

<create creator="new" javascript="DwrTest">
<param name="class" value="com.dwr.list.DwrTest"/>
</create>
<convert match="com.dwr.list.Admin" converter="bean" >
<param name="include" value="id,admin_Name,admin_Pwd,mark_id" />
</convert>


Admin.java

/**
*
*/
package com.dwr.list;
/**
* @author cyang
*
*/
public class Admin {
private int id;
private String admin_Name;
private String admin_Pwd;
private int mark_id;
/**
*
*/
public Admin() {
super();
// TODO Auto-generated constructor stub
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getAdmin_Name() {
return admin_Name;
}
public void setAdmin_Name(String admin_Name) {
this.admin_Name = admin_Name;
}
public String getAdmin_Pwd() {
return admin_Pwd;
}
public void setAdmin_Pwd(String admin_Pwd) {
this.admin_Pwd = admin_Pwd;
}
public int getMark_id() {
return mark_id;
}
public void setMark_id(int mark_id) {
this.mark_id = mark_id;
}
}


DWRTest.java

/**
*
*/
package com.dwr.list;
import java.util.List;
/**
* @author cyang
*
*/
public class DwrTest {
TestDao dao = new TestDao();
public List<Admin> Send(int mark) {
return dao.Send(mark);
}
}


TestDao,我这里方便大家模拟查询数据库，其实是自造的数据哦。

/**
*
*/
package com.dwr.list;
/**
* @author cyang
*
*/
public class Admin {
private int id;
private String admin_Name;
private String admin_Pwd;
private int mark_id;
/**
*
*/
public Admin() {
super();
// TODO Auto-generated constructor stub
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getAdmin_Name() {
return admin_Name;
}
public void setAdmin_Name(String admin_Name) {
this.admin_Name = admin_Name;
}
public String getAdmin_Pwd() {
return admin_Pwd;
}
public void setAdmin_Pwd(String admin_Pwd) {
this.admin_Pwd = admin_Pwd;
}
public int getMark_id() {
return mark_id;
}
public void setMark_id(int mark_id) {
this.mark_id = mark_id;
}
}


接下来就是页面的展现了，我把jsp和js放在一起，方便大家：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>DWR </title>
<mce:script type="text/javascript" src="dwr/interface/DwrTest.js" mce_src="dwr/interface/DwrTest.js"></mce:script>
<mce:script type="text/javascript" src="dwr/engine.js" mce_src="dwr/engine.js"></mce:script>
<mce:script type="text/javascript" src="dwr/util.js" mce_src="dwr/util.js"></mce:script>
<mce:script type="text/javascript"><!--
function CallBack(data) {
if (data.length == 0) {
alert("参数传递出现错误!");
}else{
for(var i=0;i<data.length;i++){
addRow(data[i].admin_Name,data[i].admin_Pwd,data[i].mark_id);   // 表格添加一行
}
}
}
function Send(mark){
DwrTest.Send(mark,CallBack);
}

function showTable(mark){
var i=1;
for(i=form1.maxrow.value; i>0 ; i--)
{
deleteRow(i);
}
form1.maxrow.value = 0;
Send(mark);          // 通过mark参数来判断要动态显示的内容

}

function deleteRow(index){
var tableObj=document.getElementById("mytable");
tableObj.deleteRow(index);
}

function addRow(username,password,mark_id){
var tableObj=document.getElementById("mytable");
var newRowObj=tableObj.insertRow(tableObj.rows.length);
var newColName=newRowObj.insertCell(newRowObj.cells.length);
var newColPwd=newRowObj.insertCell(newRowObj.cells.length);
var newColMrk=newRowObj.insertCell(newRowObj.cells.length);
newColName.innerHTML=username;
newColPwd.innerHTML=password;
newColMrk.innerHTML=mark_id;
form1.maxrow.value = parseInt(form1.maxrow.value) + 1;
}
// --></mce:script>

</head>

<body>
<form name="form1" >
<p align="center">
<input type="button" value="用户类别一 " onmouseover="showTable(1)">
<input type="button" value="用户类别二" onmouseover="showTable(2)">
<input type="button" value="用户类别三" onmouseover="showTable(3)">
<input type="button" value="用户类别四" onmouseover="showTable(4)">
</p>
<table width="50%" id="mytable" border="1" bordercolor="whitesmoke">
<tr align="center"><td>用户名</td><td>密码</td><td>类别</td></tr>
</table>
<input type="hidden" name="maxrow" value="0">
</form>
</body>
</html>


大功告成，运行一下试试吧，我试过了可以的
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航