最近需要做个下拉列框二级联动功能,之前所做都是使用jquery-ajax请求后台数据json格式填充select列表,现在使用dwr实现此功能。
就以简单的省市为例:
1.jsp页面:
<td id="p" class="fontleft" style="display:none">省:</td>
<td id="pT" class="fontright" style="display:none">
<select name="remark0" οnchange="subcity();">
<option value="">全选</option>
<s:iterator value="provinceList">
<option value="<s:property value="%{province}"/>" ><s:property value="%{province}"/></option>
</s:iterator>
</select>
</td>
<td id="c" class="fontleft" style="display:none">市:</td>
<td id="cT" class="fontright" style="display:none">
<select name="remark1">
<option value="">全选</option>
<s:iterator value="cityList">
<option value="<s:property value="%{city}"/>" ><s:property value="%{city}"/></option>
</s:iterator>
</select>
</td>
其中struts2标签得到的proviceList,cityList都是在action通过session得到的列表:
private List proviceList; //省列表
private List cityList; //市列表
public List getProviceList() {
return proviceList;
}
public void setProviceList(List proviceList) {
this.proviceList = proviceList;
}
public List getCityList() {
return cityList;
}
public void setCityList(List cityList) {
this.cityList = cityList;
}
/**
* 省市查询
* @return
*/
public String proviceCityQuery(){
Map map = ServletActionContext.getContext().getSession();
proviceList = (List) map.get("proviceList");
cityList = (List) map.get("cityList");
return "success";
}
onchange事件:
<!-- DWRActionUtil.js在提供的jar包中,需要将其从jar包中导出并放到web工程中 -->
<script type="text/javascript" src="../js/DWRActionUtil.js"></script>
<!-- DWRAction.js是自动生成的 -->
<script type='text/javascript' src="<%=request.getContextPath()%>/dwr/interface/DWRAction.js"></script>
<!-- engine.js,util.js在jar包中,自动引入的 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/util.js"></script>
<script language="javascript">
function subcity()
{
DWRActionUtil.execute({
namespace:'/CITY',
action:'cityAction',
executeResult:'false',
method:'getSubcitys'},'cityform', callbackchangeback);
}
function callbackchangeback(data)
{
var cityju=data.ju;
DWRUtil.removeAllOptions("remark1");
var vm=document.getElementsByName('remark1')[0];
vm.add(new Option("全选"," "));
DWRUtil.addOptions("remark1",cityju);
}
</script>
其中getSubcity为action中方法名称,cityform为表单id名,ju为一个Map。
2.web.xml中配置dwr:
<servlet>
<servlet-name>dwr</servlet-name>
<!-- org.directwebremoting.spring.DwrSpringServlet -->
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
</servlet>
(或者:
<servlet>
<servlet-name>dwr</servlet-name>
<display-name>DWR Servlet</display-name>
<description>Direct Web Remoter Servlet</description>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>scriptCompressed</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
)
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
3.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="none" javascript="DWRAction">
<param name="class" value="org.directwebremoting.struts2.DWRAction"/>
</create>
<convert converter="bean" match="org.directwebremoting.struts2.ActionDefinition">
<param name="include" value="namespace,action,method,executeResult" />
</convert>
<convert converter="bean" match="org.directwebremoting.struts2.AjaxResult"/>
<!-- 相应的Struts2的Action -->
<convert match="com.ssh2.action.CityAction" converter="bean"/>
</allow>
</dwr>