2: 对表格数据进行操作
刚才我们在客户端使用文本框和div块来输入数据可接受数据,在这个中间可以使用下面的方法来处理数据。
DWRUtil.getValue(“username”); //这个方法得到页面中间id为username的值
DWRUtil.setValue(“rst”,”你好”); //这个方法设置页面中间id为username的值
在客户端显示数据还有其他的方式,其中使用比较多的有表格显示数据集合,下拉框显示多条数据。
在dwr中间可以使用方法来比较方便的再客户端操作显示数据
先看基本的方法
DWRUtil.removeAllOptions('rst');//删除列表中的所有option
DWRUtil.addOptions('rst', goods,"id","msg");
//添加option对象,goods是对象数组,其属性id作为option的value值。其属性msg作为option的text的值
DWRUtil.removeAllRows("rst");//删除tbody中间所有的行
DWRUtil.addRows("rst", goods,[getid, getmsg]);//添加表的行,goods数组
下面例子说明:
先看后台bean:
Message.java封装基本的消息
package com.yd.colbean;
public class Message {
private Integer id;
private String msg;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
控制类
package com.yd.colbean;
import java.util.ArrayList;
import java.util.List;
public class UserCol {
private static List ls=new ArrayList();
//模拟得到所有的的消息集合,
public List getUserMessage(){
if(ls.size()<2){//如果消息数量太少,就删除,另外增加,在实际中应该从数据库中取值
ls.clear();
for(int i=0;i<6;i++){
Message msg=new Message();
msg.setId(new Integer(i));
msg.setMsg("消息内容"+i);
ls.add(msg);
}
}
return ls;
}
}
配置文件
Web.xml同上
dwr.xml
<dwr>
<allow>
<!-- convert将Message的集合变成javascript中间的对象数组-->
<convert converter="bean" match="com.yd.colbean.Message"/>
<create creator="new" javascript="userAction" class="com.yd.colbean.UserCol" scope="session">
<include method="getUserMessage" />
</create>
</allow>
</dwr>
注意在服务器返回集合到客户端时,需要进行转换位javascript的对象。需要定义convert
下面是
Test1.jsp
同样需要复制
<script type='text/javascript' src='/TestDWR2/dwr/interface/userAction.js'/>
<script type='text/javascript' src='/TestDWR2/dwr/engine.js'></script>
<script type='text/javascript' src='/TestDWR2/dwr/util.js'></script>
到页面中间
<SCRIPT type='text/javascript'>
//这个函数在点击按钮的时候调用。首先删除rst这个tbody中间的内容。然后请求服务器的方法
function test1() {
DWRUtil.removeAllRows("rst");
userAction.getUserMessage(fillTable);
}
//这里定义对数据的转化规则,转换规则是用对象数据中的每一个对象来进行转换,返回一个字符串或其他对象,显示在表格的td中间
var getid = function(unit) {
if (unit.id % 2 == 0)
return "<font color=red>"+unit.id+"</font>";
else
return "<font color=green>"+unit.id+"</font>";
};
var getmsg = function(unit) { return unit.msg};
var bt=function(unit) {
return "<input type='button' value='delete' onclick='alert(/""+unit.id+"/");'/>";
};
//回调函数 ,在这里会对返回的goods对象集合,循环调用对应的转化规则来得到没一行的内容来显示
function fillTable(goods) {
DWRUtil.addRows("rst", goods,[getid, getmsg,bt]);
}
</SCRIPT>
</head>
<body>
<INPUT type="button" value="得到消息" onclick="test1()">
<table>
<thead> <!—这个是表格的头 -->
<th>id</th>
<th>msg</th>
<th>aa</th>
</thead>
<tbody id="rst"> <!—这个是表格的主体,使用ajax来动态的修改 -->
</tbody>
</table>
</body>
最后显示结果
点击按钮