spring与dwr整合实现级联选择

spring与dwr整合实现级联选择

                  应用场景，当用户选择一辆车，需要显示这辆车的厂牌型号，如何做dwr来实现一下；

1、dwr.jar 还有bsf.jar 可以在这里下载；（csdn的资源发布了需要等一会才可以看到的）

2、web.xml里面配置一下；

   <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring/oaContext.xml</param-value>
    </context-param>
   
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

  <!-- DWR -->
  <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>
</servlet>
<servlet-mapping>
  <servlet-name>dwr-invoker</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://www.getahead.ltd.uk/dwr/dwr20.dtd" >

< dwr >
   <!--  init is only needed if you are extending DWR  -->
   < init >
     < creator  id ="spring"  class ="org.directwebremoting.spring.SpringCreator" />
   </ init >
   <!--  without allow, DWR isn't allowed to do anything  -->
   < allow >
     < create  creator ="spring"  javascript ="getCarModule" >
         < param  name ="beanName"  value ="carService" />         
     </ create >
    
     < convert  converter ="bean"  match ="com.oa.carmanage.domain.TbCarType" >
         < param  name ="include"  value ="carModel" />
      </ convert >
   </ allow >
   <!--  you may need to tell DWR about method signatures  -->
   < signatures >
   </ signatures >

</ dwr >

 

4、写自己的实现方法注意spring的配置文件需要设置一个bean

 

         <!--  车辆管理service  -->
         < bean  id ="carService"  class ="com.oa.carmanage.car.service.impl.CarServiceImpl" >
              < property  name ="manager"  ref ="managerSupport" ></ property >
         </ bean >

5、里面实现自己的方法

 

     public  Object[] getCarModuleByCarNum(String carNum)  {    
        List lstret = manager.getByQueryName("carmanage.car.service.impl.carservicesimpl.getmodulebycarnum",carNum);     
        return lstret.toArray();
    }

6、写一个js文件来调用

 

     function  getCarModuleByCarNum() {
            var carNum = $("carNum").value;
            getCarModule.getCarModuleByCarNum(carNum,callback);
        }
        
     function  callback(list) {
            var carModule = $("carModule"); 
            dwr.util.removeAllOptions(carModule);
            if(list.length==0){
               alert("输入有误！");
            }else{
              dwr.util.addOptions(carModule,list);
            }
        }

7、在jsp文件里面引入js

 

         < script  type ='text/javascript'  src ='<%=request.getContextPath()% > /dwr/interface/getCarModule.js'> </ script >
         < script  type ='text/javascript'  src ='<%=request.getContextPath()% > /dwr/engine.js'> </ script >
         < script  type ='text/javascript'  src ='<%=request.getContextPath()% > /dwr/util.js'> </ script >     
         < script  type ="text/javascript"  src ="<%=request.getContextPath()%>/common/js/getcarmodulebycarnum.js" ></ script >         

 

8、实现级联动作的代码

 

                                         < tr >
                                             < td  class ="td_width110_style" > 车牌号： </ td >
                                        < td >
                                              < html:select  property ="carNum"  styleId ="carNum"  onclick ="getCarModuleByCarNum()" >                                              
                                                 < html:options  collection ="carNum"  labelProperty ="carNum"  property ="id" />
                                              </ html:select >  
                                         </ td >
                                         </ tr >
                                         < tr >
                                             < td  class ="td_width110_style" > 车辆类型： </ td >
                                             < td >
                                                < select  id ="carModule" ></ select >
                                             </ td >
                                         </ tr >     

 

这样就实现了需要的功能！！！good  luck！！！