您的位置：首页 > 其它

dwr实现三级联动下拉框

2009-05-15 15:07 344 查看
dwr：direct web remoting 是我们通过javascript方便的操作业务方法。我以一个三级联动下拉框的例子给大家演示dwr是如何实现的。我用到的技术有spring 2.0.5 ，dwr2.0.5，hibernate3.2.3.ga,struts1.2.9，主要涉及到dwr如何调用spring管理的业务方法，以及dwr如何处理返回的数据。

dwr的配置：

]	<!--配置DWR拦截器-->
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>


我要实现的是地区，市县，社区的三级下拉，比如邯郸地区，邯郸县，明珠社区，这样的下拉框，数据库表设计是这样的：

id name pid

1 邯郸 0

2 邯郸县 1

3 明珠社区 2

.....

大家一看都明白了吧。

那么如何实现呢？第一个下了框显示地区，数据可以从action或者servlet中去，也可以用dwr来去，我采取第二种方式。

html代码：

<mce:script type="text/javascript"><!--

function initCity(){
var cityObj = document.getElementById('city');
var areaObj = document.getElementById('area');
var street = document.getElementById('street');
cityObj.options[0] = new Option('请选择','-1');
areaObj.options[0] = new Option('请选择','-1');
street.options[0] = new Option('请选择','-1');
cityService.getBaseCities(cb);
function cb(cities){
for(var i=0;i<cities.length;i++){
cityObj.options[cityObj.options.length] =
new Option(cities[i].name,cities[i].id);
}
}
}
...
// --></mce:script>
<BODY onload="initCity();">
城    市：
<select id=city name=city onchange="loadArea(this);"></select>
...


注意 cityService.getBaseCities(cb); 这行代码 cityService 是dwr暴漏给javascript的对象，用它可以操作业务方法。它是怎么设置的呢？实际上我们CityService是我们业务方法，代码如下

public interface ICityService {
...
public List getBaseCities();
}

public class CityServiceImpl implements ICityService {
CityDao cityDao;
...
public List getBaseCities() {
return cityDao.getBaseCities();
}
}


那么javascript如何才能调用getBaseCities()方法，来填充第一个下拉框呢？

好，dwr一个重要的配置文件上演了。

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="spring" javascript="cityService">
<param name="beanName" value="cityService"/>
</create>
<convert converter="bean" match="com.secondhand.hibernate.entity.TtArea"/>
</allow>
</dwr>


allow节点下面的create 有一个属性 creator="spring" 代表我们要暴漏的服务端代码是从spring中来的。param的beanName代表根据spring配置文件配置的id来取bean，哪个bean呢? value="cityService"，就是cityService这个bean. 看一下spring配置文件

<bean id="cityService"  parent="txProxyTemplate">
<property name="target">
<bean class="com.secondhand.service.impl.CityServiceImpl">
<property name="cityDao">
<ref bean="TtAreaDAO" />
</property>
</bean>
</property>
</bean>


这个bean就有我们要调用的getBaseCities()方法。

那么javascript如何调用呢？

打开http://localhost:8080/项目名/dwr

点击暴漏的业务类，拷贝js引用，本例代码

<script type='text/javascript' src='/secondhandhib/dwr/interface/cityService.js'></script>
<script type='text/javascript' src='/secondhandhib/dwr/engine.js'></script>
<script type='text/javascript' src='/secondhandhib/dwr/util.js'></script>


结合我上面的javascript的代码就可以用了。

下面我贴出全部html代码：

<LINK href="css/main.css" type=text/css rel=stylesheet>
<script type='text/javascript' src='/secondhandhib/dwr/interface/cityService.js'></script>
<script type='text/javascript' src='/secondhandhib/dwr/engine.js'></script>
<script type='text/javascript' src='/secondhandhib/dwr/util.js'></script>

<META content="MSHTML 6.00.2900.5726" name=GENERATOR>

<script type="text/javascript">
function initCity(){
var cityObj = document.getElementById('city');
var areaObj = document.getElementById('area');
var street = document.getElementById('street');
cityObj.options[0] = new Option('请选择','-1');
areaObj.options[0] = new Option('请选择','-1');
street.options[0] = new Option('请选择','-1');
cityService.getBaseCities(cb);
function cb(cities){
for(var i=0;i<cities.length;i++){
cityObj.options[cityObj.options.length] = new Option(cities[i].name,cities[i].id);
}
}

}
function loadArea(obj){
var city = $("city").value;
var areaObj = document.getElementById('area');
var street = document.getElementById('street');
cityService.getAreaBySuper(city,areaCb);
areaObj.length=0;
street.length=0;
areaObj.options[0] = new Option('请选择','-1');
street.options[0] = new Option('请选择','-1');
function areaCb(areas){
for(var i=0;i<areas.length;i++){
areaObj.options[areaObj.options.length] = new Option(areas[i].name,areas[i].id);
}
}
}
function loadArea1(obj){
var area = $("area").value;
var street = document.getElementById('street');
cityService.getAreaBySuper(area,streetCb);
street.length=0;
street.options[0] = new Option('请选择','-1');
function streetCb(streets){
for(var i=0;i<streets.length;i++){
street.options[street.options.length] = new Option(streets[i].name,streets[i].id);
}
}
}
</script>
</HEAD>
<BODY onload="initCity();">
...
<select id=city name=city onchange="loadArea(this);"> </select>
<select id=area  name=area onchange="loadArea1(this);"></select>
<select id=street name=street> </select>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航