DWR入门 （2）用户实例

DWR入门 （二）用户实例
1. 创建model类
创建一个User类和一个Group类，
每一个user属于一个group。

2. 创建UserService类

public class UserService {//由于DWR会创建UserService对象，所以这里要用静态属性，让多个类实例共享这些属性。private static Map<Integer,User> users=new HashMap<Integer,User>();static {users.put(1, new User(1,"alleni",new Group(1,"english")));users.put(2, new User(2,"eline",new Group(1,"english")));users.put(3, new User(3,"doudou",new Group(2,"hunter")));}public UserService(){ System.out.println("UserService Constructor");}public User load(int id){return users.get(id);}public void add(User user){users.put(user.getId(), user);}public void delete(int id){users.remove(id);}public List<User>list(){ List<User> list=ArraysHelper.map2List(users);return list;}}

  <create creator="new">  <param name="class" value="com.lj.dwr.UserService"/>   </create>      <convert match="dwr.User" converter="bean"/>  <convert match="dwr.Group" converter="bean"/>

<script type="text/javascript"> window.onload=init;  function init(){ //var t=document.getElementById("users"); var t=$("#users");      UserService.load(1,function(data){ console.log(data); console.log(data.id+": "+data.name+"->"+data.group.name); });  }; </script>

<tr><td colspan="3">输入id:<input type="text" id="searchId"/><input type="button" value="search" onclick="searchUser(searchId.value)"/></td></tr>function searchUser(id){//console.log(id);//alert(id);UserService.load(id,function(data){var tb = $("#users tbody");tb.empty();tb.append("<tr><td>" + data.id + "</td>" +"<td>" + data.name + "</td>"+  "<td>" + data.group.name + "</td></tr>");});}

UserService.list(function(data){ console.log(data); console.log(data.length); //3});

UserService.list(function(data) {console.log(data);console.log(data.length);var tb = $("#users");var tbody=tb.append("<tbody>");for ( var i = 0; i < data.length; i++) {console.log(data[i].id+":"+data[i].name+":"+data[i].group.name);tbody.append("<tr><td>" + data[i].id + "</td>" +"<td>" + data[i].name + "</td>"+  "<td>" + data[i].group.name + "</td></tr>");}tb.append("</tbody>");});

用户名:<input type="text" id="userName" /> 用户id:<input type="text" id="userId" /><br /> 组名称:<input type="text" id="groupName" /> 组id:<input type="text" id="groupId" /><br /><input type="button" id="addUser" value="添加用户" />function init() { var addUserNode = $("#addUser");addUserNode.on("click", function() {addUser();});       }function addUser() {var uid = $("#userId").val();var gid = $("#groupId").val();var uname = $("#userName").val();var gname = $("#groupName").val();var user = {"id" : uid,"name" : uname,group : {"id" : gid,"name" : gname}};UserService.add(user);init();}