1、使用dwr.util可以非常方便的添加select的option和获取id的值,添加table的row等处理。
2、首先需要引入util.js
<script type="text/javascript" src="${pageContext.request.contextPath}/dwr/util.js"></script>
3、获取输入框的值
<script type="text/javascript">
function calAdd() {
var a = dwr.util.getValue("a");
var b = dwr.util.getValue("b");
MyDwr.add(parseInt(a),parseInt(b),function(data){
alert(data);
});
}
</script>
<input type="text" id="a"/>
<input type="text" id="b"/>
<input type="button" value="获取" onclick="calAdd()">
4、操作select下拉列表
function initAddress() {
dwr.util.removeAllOptions();
var data = [{id:1,name:"北京"},{id:2,name:"天津"},{id:3,name:"上海"}];
//address表示下拉列表的id,“id”表示取data中的id属性为key,“name”表示取name属性为value
dwr.util.addOptions("address",data,"id","name");
}
5、操作表格
<table width="600" border="1">
<thead>
<tr>
<td>ID</td>
<td>username</td>
<td>groupName</td>
</tr>
</thead>
<tbody id="user">
</tbody>
</table>
<input type="button" value="初始化用户" onclick="initUser()"/>
function initUser() {
MyDwr.list(function(data){
dwr.util.addRows("user",data,cellFuncs,{ escapeHtml:false });
});
}
//对数据的处理
var cellFuncs=[
function(data){return data.id},//第一列怎么显示
function(data){return data.username},//第二列怎么显示
function(data){return data.group.name}//第三列怎么显示
];
public List<User> list(){
List<User> list = new ArrayList<User>();
User user = new User();
user.setId(1l);
user.setName("youyang");
Group group = new Group();
group.setId(1);
group.setName("group1");
user.setGroup(group);
list.add(user);
User user2 = new User();
user2.setId(2l);
user2.setName("youyang2");
Group group2 = new Group();
group2.setId(2);
group2.setName("group2");
user2.setGroup(group2);
list.add(user2);
return list;
}