利用Dwr实现二级菜单联动效果

lzh3521

于 2010-04-13 16:06:09 发布

阅读量132

点赞数

分类专栏： DWR 文章标签： DWR Java JavaScript 脚本 HTML ViewUI

DWR 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

利用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>