Dwrを利用して、二級メニュー連動効果を実現します。


Dwrを利用して、二級メニュー連動効果を実現します。
データ充填コードを先に貼り付けます。
public class PersonManager {
	private static Map orgs = new HashMap();
	private static Map persons = new HashMap();
	
	static{
		for(int i=0; i<10; i++){
			Org org = new Org();
			org.setId(i);
			org.setName("  "+i);
			orgs.put(org.getId(), org);
			
			List personList = new ArrayList();
			for(int j=0; j<20; j++){
				Person person = new Person();
				person.setId(j);
				person.setName("org["+org.getName()+"]    [  "+j+"]");
				personList.add(person);
			}
			persons.put(org.getId(), personList);
		}
	}
	
	public Collection searchAllOrg(){
		return orgs.values();
	}
	
	public List searchPersons(int orgId){
		return (List)persons.get(orgId);
	}
}
機構と人員実体類:
public class Org {
	private int id;
	private String name;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

public class Person{
	private int id;
	private String name;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}
dwr.xmlファイル:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
  <allow>
   <create creator="new" javascript="personManager">
      <param name="class" value="com.bjsxt.dwr.PersonManager"/>
    </create>
    <!--DWR        javascript            java       。
    	                 ,           javascript        
    java    。    Convertor   。 -->
    <convert converter="bean" match="com.bjsxt.dwr.Person"/>
    <convert converter="bean" match="com.bjsxt.dwr.Org"/>
  </allow>
</dwr>
展開ページ:
<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/interface/personManager.js"></script>
<script type="text/javascript">
function init(){
	personManager.searchAllOrg(
		function(data){
			// [{"id":xx,"name":xx},{"id":xxx,"name":xxx},{}]
			dwr.util.addOptions("o",data,"id","name");
			searchPersons();
		}
	);
}

function searchPersons(){
	personManager.searchPersons(
		$("o").value,
		function(data){
			dwr.util.removeAllOptions("p");//          ,        
			dwr.util.addOptions("p",data,"id","name");
		}
	);
}

</script>
</head>
<body onload="init()">

     :<select id="o" onchange="searchPersons()"></select> <br>
     :<select id="p"></select>

</body>
</html>