最近做公司项目,其中要做一个市、区、街道、小区的四级联动下拉框,学习了DWR做的。
首先下载DWR.jar,并导入到工程
配置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>
<init-param>
<param-name>allowScriptTagRemoting</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>
allowGetForSafariButMakeForgeryEasier
</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/js/dwr/*</url-pattern> //dwr运行路径
</servlet-mapping>
在于web.xml同级放入dwr.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="dwrDAO">
<param name="class" value="cn.com.enorth.volunteer.common.DwrDAO"/> <!--javascript的值与jsp页面中的DWR名称相同--!>
</create>
</allow>
</dwr>
编写java类,包含jsp页面中调用的方法,这里传的是一个JSON值,地点内容都存在数据库Address表里,这里直接调用DAO方法取出List,DAO略过
public JSONArray getSelect(long parentId) throws SQLException {
List<Map<String,String>> result=new ArrayList<Map<String,String>>();
List<Address> list = new AddressDao().getArea(parentId);
for(Address address : list){
Map<String,String> map = new LinkedHashMap<String, String>();
map.put("addressId", String.valueOf(address.getAddressId()));
map.put("addressName", address.getAddressName());
result.add(map);
}
System.out.println(result);
JSONArray ja = new JSONArray().fromObject(result);
String s=new JSONArray().fromObject(result).toString();
return ja;
}
最后编写jsp页面
<script src="js/dwr/engine.js" type="text/javascript"></script>
<script src="js/dwr/util.js" type="text/javascript"></script> <%--导入dwr.jar中js--%>
<script src="js/dwr/interface/dwrDAO.js" type="text/javascript"></script> <%--DWR自动生成的js,路径与dwr.xml一致--%>
<script type="text/javascript">
function change1() {
$("#val").val($("#city").val());
var city = $("#city").val();
if (city == -1) {
$("#area").empty();
$("#street").empty();
$("#place").empty();
var option1 = $("<option>").text("请选择").val(0);
$("#area").append(option1);
var option2 = $("<option>").text("请选择").val(0);
$("#street").append(option2);
var option3 = $("<option>").text("请选择").val(0);
$("#place").append(option3);
} else {
dwrDAO.getSelect(city, areaCallback);
}
}
<%--回滚函数,打开当前下拉框同时关联下一级--%>
function areaCallback(area) {
$("#area").empty();
if (area.length == 0 || $("#city").val() == -1) {
var option = $("<option>").text("请选择").val(0);
$("#area").append(option);
$("#val").val($("#city").val()); <%--提交当前一级下拉框的addressId的值--%>
} else {
var option = $("<option>").text("请选择").val(0);
$("#area").append(option);
for ( var i = 0; i < area.length; i++) {
var value = area[i]["addressId"];
var name = area[i]["addressName"];
option = $("<option>").text(name).val(value);
$("#area").append(option);
}
}
}
<%--检查,不选到最后一级不予提交--%>
function check(){
if(document.getElementById("place").value == 0){
alert("请将地点选到第四级");
return false;
}else{
return true;
}
}
function change2() {
$("#val").val($("#area").val());
var area = $("#area").val();
if (area == 0) {
$("#street").empty();
$("#place").empty();
var option = $("<option>").text("请选择").val(0);
$("#street").append(option);
var option3 = $("<option>").text("请选择").val(0);
$("#place").append(option3);
} else {
dwrDAO.getSelect(area, streetCallback);
}
}
function streetCallback(street) {
$("#street").empty();
if (street.length == 0 || $("#area").val == 0) {
var option = $("<option>").text("请选择").val(0);
$("#street").append(option);
$("#val").val($("#area").val());
} else {
var option = $("<option>").text("请选择").val(0);
$("#street").append(option);
for ( var i = 0; i < street.length; i++) {
var value = street[i]["addressId"];
var name = street[i]["addressName"];
option = $("<option>").text(name).val(value);
$("#street").append(option);
}
}
}
function change3() {
$("#val").val($("#street").val());
var street = $("#street").val();
if (street == 0) {
$("#place").empty();
var option = $("<option>").text("请选择").val(0);
$("#place").append(option);
} else {
dwrDAO.getSelect(street, placeCallback);
}
}
function placeCallback(place) {
$("#place").empty();
if (place.length == 0 || $("#street").val() == 0) {
var option = $("<option>").text("请选择").val(0);
$("#place").append(option);
$("#val").val($("#street").val());
} else {
var option = $("<option>").text("请选择").val(0);
$("#place").append(option);
for ( var i = 0; i < place.length; i++) {
var value = place[i]["addressId"];
var name = place[i]["addressName"];
option = $("<option>").text(name).val(value);
$("#place").append(option);
}
}
}
function change4() {
$("#val").val($("#place").val());
}
</script>
地址:<s:select list="${map }" id="city" headKey="0" headerValue="请选择"></s:select> <%--通过struts2的标签传过来的第一级--%>
<select id="area" οnchange="change2()">
<option selected="selected" value="0">请选择</option>
</select>
<select id="street" οnchange="change3()">
<option selected="selected" value="0">请选择</option>
</select>
<select id="place" οnchange="change4()">
<option selected="selected" value="0">请选择</option>
</select>
<s:hidden name="address.addressId" value="${address.addressId}" id="val"></s:hidden>