jquery+json+struts2+mybatis实现的多级关联下拉效果

最近需要用到多级关联下拉效果的下拉选择，框架要求struts2+spring+mybatis 。由于没接触过 mybatis （也没用过 ibatis ）。所以花了些时间，在网上查询了好久的资料，也参考了相关牛人的实现，觉得讲述的不是很详细。 OK ，废话不多说。 
    首先搭建环境，首先需要加入struts2 的相关 jar 包，这里需要说明的是，由于我用是struts2.2.1 版本了，再 struts 的 lib 包中有个  struts2-json-plugin-2.2.1.jar 插件，直接使用这个插件就行了，不需要加入独立 json 的 jar 文件。下面附带我的 jar 包 图片：

 

然后开始配置文件，配置web.xml 中的 struts2 的 filter 。

Java代码  

1. <filter>  
2.         <filter-name>struts2</filter-name>  
3.         <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>  
4.     </filter>  
5.       
6.     <filter-mapping>  
7.         <filter-name>struts2</filter-name>  
8.         <url-pattern>/*</url-pattern>  
9.     </filter-mapping>  

 

然后新建struts.xml 文件，这里需要注意的地方是， package 的 extends 不再是 struts-default 了，应当改为 json-default 。

Java代码  

1. <?xml version="1.0" encoding="UTF-8" ?>  
2. <!DOCTYPE struts PUBLIC  
3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
5.   
6. <struts>  
7.   
8.     <package name="default" namespace="/" extends="json-default">  
9.           
10.     </package>  
11. </struts>  

 

再新建一个configuration.xml 文件，配置如下 ;

Java代码  

1. <?xml version="1.0" encoding="UTF-8" ?>   
2. <!DOCTYPE configuration   
3.     PUBLIC "-//mybatis.org//DTD Config 3.0//EN"   
4.     "http://mybatis.org/dtd/mybatis-3-config.dtd">    
5.   
6. <configuration>  
7.     <environments default="development">  
8.         <environment id="development">  
9.             <transactionManager type="JDBC"></transactionManager>  
10.             <dataSource type="POOLED">  
11.                 <property name="driver" value="com.mysql.jdbc.Driver"/>  
12.                 <property name="url" value="jdbc:mysql://localhost:3306/car"/>  
13.                 <property name="username" value="root"/>  
14.                 <property name="password" value="root"/>  
15.                   
16.             </dataSource>  
17.           
18.         </environment>  
19.     </environments>  
20.       
21.     <mappers>  
22.         <mapper resource="com/ctq/entity/Car.xml"/>  
23.     </mappers>  
24.   
25.       
26. </configuration>  

 

好了，基本的配置都完成了。开始编码了。

首先我的表是一个树形结构。每条记录只有3 个属性，有自己独特的 ID ，然后也有自己的上级 ID （ parent_id' ），然后就是自己的 name 。具体结构表中数据图：

 

新建一个实体，由于我做的是一个有关汽车轮胎的关联选择。新建Car.java 。

Car.java

Java代码  

1. public class Car implements Serializable {  
2.   
3.     /** 
4.      *  
5.      */  
6.     private static final long serialVersionUID = -3292379249326160585L;  
7.     private int id;  
8.     private String name;  
9.     private int parent_id;  
10.   
11.     public int getId() {  
12.         return id;  
13.     }  
14.   
15.     public void setId(int id) {  
16.         this.id = id;  
17.     }  
18.   
19.     public String getName() {  
20.         return name;  
21.     }  
22.   
23.     public void setName(String name) {  
24.         this.name = name;  
25.     }  
26.   
27.     public int getParent_id() {  
28.         return parent_id;  
29.     }  
30.   
31.     public void setParent_id(int parent_id) {  
32.         this.parent_id = parent_id;  
33.     }  
34.   
35. }  

 

然后配置相应的map 文件 Car.xml

Java代码  

1. <?xml version="1.0" encoding="UTF-8" ?>    
2. <!DOCTYPE mapper    
3. PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN"    
4. "http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">    
5.     
6. <mapper namespace="com.ctq.entity.CarMapper">    
7.   
8. </mapper>  

 

 

编写一个action 来处理页面提交的数据， CarAction.java

CarAction.java

Java代码  

1. public class CarAction extends ActionSupport {  
2.     private int carId;  
3.     private Car car;  
4.     private List<Car> lc;  
5.   
6.     public List<Car> getLc() {  
7.         return lc;  
8.     }  
9.   
10.     public void setLc(List<Car> lc) {  
11.         this.lc = lc;  
12.     }  
13.   
14.     public int getCarId() {  
15.         return carId;  
16.     }  
17.   
18.     public void setCarId(int carId) {  
19.         this.carId = carId;  
20.     }  
21.   
22.     public Car getCar() {  
23.         return car;  
24.     }  
25.   
26.     public void setCar(Car car) {  
27.         this.car = car;  
28.     }  
29.   
30.     public String listCar() throws Exception {  
31.         lc=CarImpl.listCar(carId);  
32.         return "list";  
33.     }  
34.   
35. }  

 

写好了 action，需要在 struts.xml 中配置相应的 action 了，这里需要注意一点， CarAction 中 listCar的 return 必需为“ list ”，这样才会返回集合，可以利用 json 自动的配置好，在 result 中的 name= “list ”， type 需要配置为 json 。

Java代码  

1. <?xml version="1.0" encoding="UTF-8" ?>  
2. <!DOCTYPE struts PUBLIC  
3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
5.   
6. <struts>  
7.   
8.     <package name="default" namespace="/" extends="json-default">  
9.           
10.         <action name="getCarJSON" class="com.ctq.action.CarAction">  
11.             <result name="list" type="json"></result>  
12.         </action>  
13.           
14.     </package>  
15. </struts>  

 

然后编写 CarImpl.java使用 mybatis 框架来对数据库进行查询。

Java代码  

1. public class CarImpl {  
2.     public static List<Car> listCar(int id) {  
3.         SqlSession session=Util.getSqlSessionFactory().openSession();  
4.         List<Car> la=null;  
5.         try{  
6.             la=session.selectList("com.ctq.entity.CarMapper.listCar", id);  
7.               
8.         }catch(Exception e){  
9.             e.printStackTrace();  
10.         }finally{  
11.             session.close();  
12.         }  
13.         return la;  
14.     }  
15. }  

 

这里需要一个导入 sqlsessionFactory的 util 类。 Util.java

Java代码  

1. public class Util {  
2.     private static SqlSessionFactory sqlSessionFactory = null;  
3.     static{  
4.         String resource = "configuration.xml";  
5.         Reader reader = null;  
6.         try {  
7.             reader = Resources.getResourceAsReader(resource);  
8.         } catch (IOException e) {  
9.             // TODO Auto-generated catch block  
10.             e.printStackTrace();  
11.         }  
12.         sqlSessionFactory = new SqlSessionFactoryBuilder().build(reader);  
13.     }  
14.     public static SqlSessionFactory getSqlSessionFactory(){  
15.         return sqlSessionFactory;  
16.     }  
17. }  

 

然后需要在Car.xml 中配置相应的 select 。

Java代码  

1. <mapper namespace="com.ctq.entity.CarMapper">    
2.     <select id="listCar" parameterType="int" resultType="com.ctq.entity.Car">  
3.         SELECT * FROM car WHERE parent_id=#{id}  
4.     </select>  
5. </mapper>  

 

 

现在基本的编码都完成了。开始写页面了，新建car.jsp 文件，代码如下：

Java代码  

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
2. <%  
3. String path = request.getContextPath();  
4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
5. %>  
6.   
7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
8. <html>  
9.   <head>  
10.     <base href="<%=basePath%>">  
11.       
12.     <title>My JSP 'index.jsp' starting page</title>  
13.     <meta http-equiv="pragma" content="no-cache">  
14.     <meta http-equiv="cache-control" content="no-cache">  
15.     <meta http-equiv="expires" content="0">      
16.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
17.     <meta http-equiv="description" content="This is my page">  
18.     <script type="text/javascript" src="<%=path %>/js/jquery-1.5.1.js"></script>  
19.     <script type="text/javascript" src="<%=path %>/js/car.js"></script>  
20.       
21.       
22.       
23.   </head>  
24.     
25.   <body>  
26.     <div id="">  
27.             <select name="toCarBrand" id="toCarBrand" οnchange="getCar('type')" οnkeyup="this.blur();this.focus();">  
28.                 <option value="" selected>  
29.                     请选择车牌...  
30.                 </option>  
31.             </select>  
32.             <select name="toCarType" id="toCarType" οnchange="getCar('num')" οnkeyup="this.blur();this.focus();">  
33.                 <option value="">  
34.                     请选择车系...  
35.                 </option>  
36.             </select>  
37.             <select name="toCarNum" id="toCarNum" οnchange="setTheOne(this.name)" οnkeyup="this.blur();this.focus();">  
38.                 <option value="">  
39.                     请选择型号...  
40.                 </option>  
41.             </select>  
42.         </div>  
43.         <div id="message"></div>  
44.   </body>  
45. </html>  

  这边我修改了select标签，加入了onchange和onkeyup事件，这样就可以兼容了IE和Firefox了（因为Firefox不支持onchange。）

这边在导入js 文件时，需要先导入 jquery 的 js 文件，然后再导入 car.js 文件。

car.js文件代码如下：

Java代码  

1. $(document).ready(function() {  
2.     getCarBrand();  
3.   
4. });  
5. //取所有车牌  
6. function getCarBrand() {  
7.     var url = "getCarJSON!listCar.action?carId=0";  
8.     $.getJSON(url, function(data) {  
9.         setCarBrand(data);  
10.     });  
11.   
12. }  
13.   
14. //设置车牌  
15. function setCarBrand(data) {  
16.   
17.     var carBrand = document.getElementById("toCarBrand");  
18.     $("#message").html("");  
19.     $.each(data.lc, function(i, area) {  
20.         var value = area.id;  
21.         var text = area.name;  
22.         $("#message")  
23.                 .append("<div>value=" + value + ",text=" + text + "</div>");  
24.         var option = new Option(text, value);  
25.         carBrand.options.add(option);  
26.   
27.     });  
28.   
29. }  
30.   
31. //按上级ID取相应的型号  
32. function getCar(name) {  
33.   
34.     if (name == 'type') {  
35.         clearSel(document.getElementById("toCarType")); //清空车牌  
36.         var carBrand = document.getElementById("toCarBrand");  
37.         if (carBrand.options[carBrand.selectedIndex].value == "")  
38.             return;  
39.         var carId = carBrand.options[carBrand.selectedIndex].value;  
40.         $("#message").html("");  
41.         $("#message").append("<div>carId=" + carId + "</div>");  
42.         var url = "getCarJSON!listCar.action?carId=" + carId + "";  
43.         $.getJSON(url, function(data) {  
44.             setCarType(data);  
45.         });  
46.   
47.     } else if (name == 'num') {  
48.         clearSel(document.getElementById("toCarNum")); //清空型号  
49.         var carNum = document.getElementById("toCarType");  
50.         if (carNum.options[carNum.selectedIndex].value == "")  
51.             return;  
52.         var carId = carNum.options[carNum.selectedIndex].value;  
53.         $("#message").html("");  
54.         $("#message").append("<div>carId=" + carId + "</div>");  
55.         var url = "getCarJSON!listCar.action?carId=" + carId + "";  
56.         $.getJSON(url, function(data) {  
57.             setCarNum(data);  
58.         });  
59.           
60.     }  
61. }  
62.   
63. //当改变车牌时设置对应系列  
64. function setCarType(data) {  
65.   
66.     var carType = document.getElementById("toCarType");  
67.     var value1=null;  
68.     var text1="请选择对应的车系";  
69.     var option1=new Option(text1,value1);  
70.     carType.options.add(option1);  
71.     $.each(data.lc, function(i, area) {  
72.         var value = area.id;  
73.         var text = area.name;  
74.         var option = new Option(text, value);  
75.         carType.options.add(option);  
76.     });  
77.   
78. }  
79.   
80. //当改变型号时设置对应的具体型号  
81. function setCarNum(data) {  
82.     var carNum = document.getElementById("toCarNum");  
83.     var value1=null;  
84.     var text1="请选择对应的型号";  
85.     var option1=new Option(text1,value1);  
86.     carNum.options.add(option1);  
87.     $.each(data.lc, function(i, area) {  
88.         var value = area.id;  
89.         var text = area.name;  
90.         var option = new Option(text, value);  
91.         carNum.options.add(option);  
92.     });  
93.       
94. }  
95. //设置具体的某一个  
96. function setTheOne(data){  
97.     $("#message").html("");  
98.     var theOne=document.getElementById("toCarNum");  
99.     var value=theOne.value;  
100.     $("#message").append("<div>value=" + value + "</div>");  
101. }  
102.   
103. // 清空下拉列表  
104. function clearSel(oSelect) {  
105.   
106.     while (oSelect.childNodes.length > 0) {  
107.         oSelect.removeChild(oSelect.childNodes[0]);  
108.     }  
109.   
110. }  

 

这里需要掌握相应的jquery 操作， jquery 可以方便的实现一些增加 html 标签的功能。

好了，配置好相应的tomcat 内容，效果图：

 

实现的功能还很简单，有很多的地方自己也没搞清楚。希望能帮到一些人，有什么优化的方法和意见的话，欢迎可以共同研究下。