`
锅巴49
  • 浏览: 164018 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

用dwr做级联下拉表单

DWRServletJavaScriptSpringStruts 
阅读更多

级联下拉表单的做法有很多种，如jquery ajax，dwr等。

现在我介绍下用dwr的做法。

 

实现目标：

 

两级地域下拉表单

 A      B

 

A中有三个选项：全部，北京，上海

当A选全部时，B中出现全部

当A选北京时，B中出现全部，朝阳区，海淀区

当A选上海时，B中出现全部，浦东区，普坨区

 

1、下载dwr-2.0.rc1.jar，放入WEB-INIF/lib，附件中有。

2、在web.xml中加入

<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
		<init-param>
			<param-name>crossDomainSessionSecurity</param-name>
			<param-value>false</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>

 

我加在struts的filter之后

 

3、新建Area类，地域对象

package com.my.dwr;

/**
 * 
 * @author 锅巴
 * @date 2011-3-6
 * @description
 */
public class Area {

	private String name;
	
	private int code;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getCode() {
		return code;
	}

	public void setCode(int code) {
		this.code = code;
	}
	
	
}

 

 

4、新建AreaService对象，业务对象

package com.my.dwr;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 
 * @author 锅巴
 * @date 2011-3-6
 * @description
 */
public class AreaService {

	private Map<Integer,List<Area>> areaMap = null;
	

	
	private List<Area> parentAreas = null;
	
	public AreaService(){
		
		areaMap = new HashMap<Integer, List<Area>>();
		parentAreas = new ArrayList<Area>();
		
		Area area = new Area();
		area.setCode(-1);
		area.setName("全部");
		
		Area area0 = new Area();
		area0.setCode(1);
		area0.setName("北京");
		
		Area area1 = new Area();
		area1.setCode(2);
		area1.setName("上海");
		
		Area area0_0 = new Area();
		area0_0.setCode(-1);
		area0_0.setName("全部");
		
		Area area0_1 = new Area();
		area0_1.setCode(3);
		area0_1.setName("朝阳区");
		
		Area area0_2 = new Area();
		area0_2.setCode(4);
		area0_2.setName("海淀区");
		
		Area area1_0 = new Area();
		area1_0.setCode(-1);
		area1_0.setName("全部");
		
		Area area1_1 = new Area();
		area1_1.setCode(5);
		area1_1.setName("浦东区");
		
		Area area1_2 = new Area();
		area1_2.setCode(6);
		area1_2.setName("普坨区");
		
		parentAreas.add(area);
		parentAreas.add(area0);
		parentAreas.add(area1);
		
		
		List<Area> areas = new ArrayList<Area>();
		areas.add(area);
		
		areaMap.put(-1, areas);
		
		
		List<Area> area0s = new ArrayList<Area>();
		area0s.add(area0_0);
		area0s.add(area0_1);
		area0s.add(area0_2);
		areaMap.put(1, area0s);
		
		List<Area> area1s = new ArrayList<Area>();
		area1s.add(area1_0);
		area1s.add(area1_1);
		area1s.add(area1_2);
		areaMap.put(2, area1s);
		
		
	}
	
	

	
	public List<Area> getAreasByParentId(int areaId){
		return areaMap.get(areaId);
	}
	
	public List<Area> getParentAreas(){
		return parentAreas;
	}
	
}

 

5、在WEB-INF/中新建dwr.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"  "http://www.getahead.ltd.uk/dwr/dwr20.dtd"> 
<dwr>
	<allow>
		<!-- 从spring ioc 中获取 -->
		<create creator="spring" javascript="JAreaSelect">
			
			<param name="beanName" value="areaService" />

			 <!-- 可以指定暴露的方法
			 <include method="Register" />
			  -->
			 
		</create>
		
		<!--  直接生成一个实例
		<create creator="new" javascript="JAreaSelect">
			<param name="class" value="com.my.dwr.AreaService" />
		</create>
		-->
		
		<!-- 将area转成json -->
		<convert converter="bean" match="com.my.dwr.Area">
			<!-- 
			可以指定要输出的属性
			<param name="include" value="storeId,fullName,city,address,phoneURL,photoURL,DetailURL,posx,posy,discount,discountnotes"/>
			 -->
		</convert>
	</allow>
</dwr>

 

 

6、新建dwr.jsp页面，

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isErrorPage="true"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="parentArea" onchange="changeParentArea();return false;">
	<s:iterator value="parentAreas">
		<option value="<s:property value='code'/>"><s:property
			value="name" /></option>
	</s:iterator>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;
<select id="childArea">
	<option value="-1">全部</option>
</select>
<script language=javascript>
	function changeParentArea() {
		var the_index = $("parentArea").selectedIndex;
		var the_selected = $("parentArea").options[the_index];
		JAreaSelect.getAreasByParentId(the_selected.value,
				changeParentAreaCallback);
	}

	function changeParentAreaCallback(childs) {
		var selectName = document.getElementById("childArea");
		selectName.options.length = 0;

		for ( var j = 0; j < childs.length; j++) {
			area = childs[j];
			selectName.options[j] = new Option(area.name, area.code);
		}
	}
</script>
<!-- dwr 引入的 文件 -->
<script type='text/javascript' src='/dwr/interface/JAreaSelect.js'></script>
<script type='text/javascript' src='/dwr/engine.js'></script>
<script type="text/javascript" src="/dwr/util.js">
	
</script>
</body>
</html>

 

 

7、建一个action导向该jsp，url为：/common/dwr.html

package com.my.action;

import java.util.List;

import com.my.dwr.Area;
import com.my.dwr.AreaService;
import com.opensymphony.xwork2.ActionSupport;

/**
 * 
 * @author 锅巴
 * @date 2011-3-6
 * @description
 */
public class Dwr extends ActionSupport{
	
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	private AreaService areaService;

	private List<Area> parentAreas;
	
	@Override
	public String execute() throws Exception {
		// TODO Auto-generated method stub
		
		parentAreas = areaService.getParentAreas();
		
		return SUCCESS;
	}

	
	
	
	public List<Area> getParentAreas() {
		return parentAreas;
	}





	public void setAreaService(AreaService areaService) {
		this.areaService = areaService;
	}
	
	
	

}

 

 

可以访问/common/dwr.html了，试试下拉的效果

0
顶
2
踩
分享到：
| struts2中输出json，用jquery得到结果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DWR 联动下拉菜单基本应用

    在本例中，我们将讨论如何利用DWR2版本创建一个联动下拉菜单，这是一种常见的级联选择功能，常见于数据输入表单中，如地址选择，省-市-区的逐级筛选。 首先，我们需要在服务器端设置DWR引擎。这包括创建一个`dwr....

    dwr资源的jar包

    dwr是一组可复用并且结合得很好的Java/JavaScript包.它通过AJAX来轻松转变你web应用程序的交互方式.它带的一些组件包括可以自动补全的文本框架,动态级联下拉列表,动态表单等

    Java开源 AJAX框架

    它包含诸如自动完成文本框、动态级联下拉列表和动态表单等组件。 9. **AJAX-JSF Framework**：这个框架基于JSF并利用AJAX技术，用于开发轻量级客户端应用。它旨在与现有的JSF组件兼容，并遵循标准的JSF Web流程。 ...

    Ext 开发指南 学习资料

    4.4.7. 露一小手，组合上面所知，省市县三级级联。哈哈~ 4.4.7.1. 先做一个模拟的，所有数据都在本地 4.4.7.2. 再做一个有后台的，需要放在服务器上咯 4.5. 把form里的那些控件全部拿出来看看 4.6. form提交数据的...

    EXT2.0中文教程

    4.4.7. 露一小手，组合上面所知，省市县三级级联。哈哈~ 4.4.7.1. 先做一个模拟的，所有数据都在本地 4.4.7.2. 再做一个有后台的，需要放在服务器上咯 4.5. 把form里的那些控件全部拿出来看看 4.6. form提交数据的...

Magicbox
Global site tag (gtag.js) - Google Analytics