Discuss New Concept,New Technic,New Tools, Including EAI,BPM,SOA,Tibco,IBM MQ,Tuxedo, Cloud,Hadoop,NoSQL,J2EE,Ruby,Scala,Python, Performance,Scalability,Distributed,HA, Social Network,Machine Learning.

J2EE-Other

Jan 302013
 

original:http://www.iteye.com/topic/974139

最近需要用到多级关联下拉效果的下拉选择,框架要求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.     <filter-mapping>
  6.         <filter-name>struts2</filter-name>
  7.         <url-pattern>/*</url-pattern>
  8.     </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. <struts>
  6.     <package name=”default” namespace=”/” extends=”json-default”>
  7.     </package>
  8. </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. <configuration>
  6.     <environments default=”development”>
  7.         <environment id=”development”>
  8.             <transactionManager type=”JDBC”></transactionManager>
  9.             <dataSource type=”POOLED”>
  10.                 <property name=”driver” value=”com.mysql.jdbc.Driver”/>
  11.                 <property name=”url” value=”jdbc:mysql://localhost:3306/car”/>
  12.                 <property name=”username” value=”root”/>
  13.                 <property name=”password” value=”root”/>
  14.             </dataSource>
  15.         </environment>
  16.     </environments>
  17.     <mappers>
  18.         <mapper resource=”com/ctq/entity/Car.xml”/>
  19.     </mappers>
  20. </configuration>

 

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

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

 

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

Car.java

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

 

然后配置相应的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. <mapper namespace=”com.ctq.entity.CarMapper”>
  6. </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.     public List<Car> getLc() {
  6.         return lc;
  7.     }
  8.     public void setLc(List<Car> lc) {
  9.         this.lc = lc;
  10.     }
  11.     public int getCarId() {
  12.         return carId;
  13.     }
  14.     public void setCarId(int carId) {
  15.         this.carId = carId;
  16.     }
  17.     public Car getCar() {
  18.         return car;
  19.     }
  20.     public void setCar(Car car) {
  21.         this.car = car;
  22.     }
  23.     public String listCar() throws Exception {
  24.         lc=CarImpl.listCar(carId);
  25.         return ”list”;
  26.     }
  27. }

 

写好了 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. <struts>
  6.     <package name=”default” namespace=”/” extends=”json-default”>
  7.         <action name=”getCarJSON” class=”com.ctq.action.CarAction”>
  8.             <result name=”list” type=”json”></result>
  9.         </action>
  10.     </package>
  11. </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.         }catch(Exception e){
  8.             e.printStackTrace();
  9.         }finally{
  10.             session.close();
  11.         }
  12.         return la;
  13.     }
  14. }

 

这里需要一个导入 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. <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN”>
  7. <html>
  8.   <head>
  9.     <base href=”<%=basePath%>”>
  10.     <title>My JSP ’index.jsp’ starting page</title>
  11.     <meta http-equiv=”pragma” content=”no-cache”>
  12.     <meta http-equiv=”cache-control” content=”no-cache”>
  13.     <meta http-equiv=”expires” content=”0″>
  14.     <meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″>
  15.     <meta http-equiv=”description” content=”This is my page”>
  16.     <script type=”text/javascript” src=”<%=path %>/js/jquery-1.5.1.js”></script>
  17.     <script type=”text/javascript” src=”<%=path %>/js/car.js”></script>
  18.   </head>
  19.   <body>
  20.     <div id=”">
  21.             <select name=”toCarBrand” id=”toCarBrand” onchange=”getCar(‘type’)” onkeyup=”this.blur();this.focus();”>
  22.                 <option value=”" selected>
  23.                     请选择车牌…
  24.                 </option>
  25.             </select>
  26.             <select name=”toCarType” id=”toCarType” onchange=”getCar(‘num’)” onkeyup=”this.blur();this.focus();”>
  27.                 <option value=”">
  28.                     请选择车系…
  29.                 </option>
  30.             </select>
  31.             <select name=”toCarNum” id=”toCarNum” onchange=”setTheOne(this.name)” onkeyup=”this.blur();this.focus();”>
  32.                 <option value=”">
  33.                     请选择型号…
  34.                 </option>
  35.             </select>
  36.         </div>
  37.         <div id=”message”></div>
  38.   </body>
  39. </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. function getCarBrand() {
  6.     var url = ”getCarJSON!listCar.action?carId=0″;
  7.     $.getJSON(url, function(data) {
  8.         setCarBrand(data);
  9.     });
  10. }
  11. //设置车牌
  12. function setCarBrand(data) {
  13.     var carBrand = document.getElementById(“toCarBrand”);
  14.     $(“#message”).html(“”);
  15.     $.each(data.lc, function(i, area) {
  16.         var value = area.id;
  17.         var text = area.name;
  18.         $(“#message”)
  19.                 .append(“<div>value=” + value + ”,text=” + text + ”</div>”);
  20.         var option = new Option(text, value);
  21.         carBrand.options.add(option);
  22.     });
  23. }
  24. //按上级ID取相应的型号
  25. function getCar(name) {
  26.     if (name == ’type’) {
  27.         clearSel(document.getElementById(“toCarType”)); //清空车牌
  28.         var carBrand = document.getElementById(“toCarBrand”);
  29.         if (carBrand.options[carBrand.selectedIndex].value == ”")
  30.             return;
  31.         var carId = carBrand.options[carBrand.selectedIndex].value;
  32.         $(“#message”).html(“”);
  33.         $(“#message”).append(“<div>carId=” + carId + ”</div>”);
  34.         var url = ”getCarJSON!listCar.action?carId=” + carId + ”";
  35.         $.getJSON(url, function(data) {
  36.             setCarType(data);
  37.         });
  38.     } else if (name == ’num’) {
  39.         clearSel(document.getElementById(“toCarNum”)); //清空型号
  40.         var carNum = document.getElementById(“toCarType”);
  41.         if (carNum.options[carNum.selectedIndex].value == ”")
  42.             return;
  43.         var carId = carNum.options[carNum.selectedIndex].value;
  44.         $(“#message”).html(“”);
  45.         $(“#message”).append(“<div>carId=” + carId + ”</div>”);
  46.         var url = ”getCarJSON!listCar.action?carId=” + carId + ”";
  47.         $.getJSON(url, function(data) {
  48.             setCarNum(data);
  49.         });
  50.     }
  51. }
  52. //当改变车牌时设置对应系列
  53. function setCarType(data) {
  54.     var carType = document.getElementById(“toCarType”);
  55.     var value1=null;
  56.     var text1=”请选择对应的车系”;
  57.     var option1=new Option(text1,value1);
  58.     carType.options.add(option1);
  59.     $.each(data.lc, function(i, area) {
  60.         var value = area.id;
  61.         var text = area.name;
  62.         var option = new Option(text, value);
  63.         carType.options.add(option);
  64.     });
  65. }
  66. //当改变型号时设置对应的具体型号
  67. function setCarNum(data) {
  68.     var carNum = document.getElementById(“toCarNum”);
  69.     var value1=null;
  70.     var text1=”请选择对应的型号”;
  71.     var option1=new Option(text1,value1);
  72.     carNum.options.add(option1);
  73.     $.each(data.lc, function(i, area) {
  74.         var value = area.id;
  75.         var text = area.name;
  76.         var option = new Option(text, value);
  77.         carNum.options.add(option);
  78.     });
  79. }
  80. //设置具体的某一个
  81. function setTheOne(data){
  82.     $(“#message”).html(“”);
  83.     var theOne=document.getElementById(“toCarNum”);
  84.     var value=theOne.value;
  85.     $(“#message”).append(“<div>value=” + value + ”</div>”);
  86. }
  87. // 清空下拉列表
  88. function clearSel(oSelect) {
  89.     while (oSelect.childNodes.length > 0) {
  90.         oSelect.removeChild(oSelect.childNodes[0]);
  91.     }
  92. }

 

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

好了,配置好相应的tomcat 内容,效果图:

 

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

 

 

Continue reading »