最近需要用到多级关联下拉效果的下拉选择,框架要求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
。
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
然后新建struts.xml
文件,这里需要注意的地方是,
package
的
extends
不再是
struts-default
了,应当改为
json-default
。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="default" namespace="/" extends="json-default">
</package>
</struts>
再新建一个configuration.xml
文件,配置如下
;
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"></transactionManager>
<dataSource type="POOLED">
<property name="driver" value="com.mysql.jdbc.Driver"/>
<property name="url" value="jdbc:mysql://localhost:3306/car"/>
<property name="username" value="root"/>
<property name="password" value="root"/>
</dataSource>
</environment>
</environments>
<mappers>
<mapper resource="com/ctq/entity/Car.xml"/>
</mappers>
</configuration>
好了,基本的配置都完成了。开始编码了。
首先我的表是一个树形结构。每条记录只有3
个属性,有自己独特的
ID
,然后也有自己的上级
ID
(
parent_id'
),然后就是自己的
name
。具体结构表中数据图:
新建一个实体,由于我做的是一个有关汽车轮胎的关联选择。新建Car.java
。
Car.java
public class Car implements Serializable {
/**
*
*/
private static final long serialVersionUID = -3292379249326160585L;
private int id;
private String name;
private int parent_id;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getParent_id() {
return parent_id;
}
public void setParent_id(int parent_id) {
this.parent_id = parent_id;
}
}
然后配置相应的map
文件
Car.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN"
"http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">
<mapper namespace="com.ctq.entity.CarMapper">
</mapper>
编写一个action
来处理页面提交的数据,
CarAction.java
CarAction.java
public class CarAction extends ActionSupport {
private int carId;
private Car car;
private List<Car> lc;
public List<Car> getLc() {
return lc;
}
public void setLc(List<Car> lc) {
this.lc = lc;
}
public int getCarId() {
return carId;
}
public void setCarId(int carId) {
this.carId = carId;
}
public Car getCar() {
return car;
}
public void setCar(Car car) {
this.car = car;
}
public String listCar() throws Exception {
lc=CarImpl.listCar(carId);
return "list";
}
}
写好了
action,需要在
struts.xml
中配置相应的
action
了,这里需要注意一点,
CarAction
中
listCar
的
return
必需为“
list
”,这样才会返回集合,可以利用
json
自动的配置好,在
result
中的
name=
“
list
”,
type
需要配置为
json
。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="default" namespace="/" extends="json-default">
<action name="getCarJSON" class="com.ctq.action.CarAction">
<result name="list" type="json"></result>
</action>
</package>
</struts>
然后编写
CarImpl.java使用
mybatis
框架来对数据库进行查询。
public class CarImpl {
public static List<Car> listCar(int id) {
SqlSession session=Util.getSqlSessionFactory().openSession();
List<Car> la=null;
try{
la=session.selectList("com.ctq.entity.CarMapper.listCar", id);
}catch(Exception e){
e.printStackTrace();
}finally{
session.close();
}
return la;
}
}
这里需要一个导入
sqlsessionFactory的
util
类。
Util.java
public class Util {
private static SqlSessionFactory sqlSessionFactory = null;
static{
String resource = "configuration.xml";
Reader reader = null;
try {
reader = Resources.getResourceAsReader(resource);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
sqlSessionFactory = new SqlSessionFactoryBuilder().build(reader);
}
public static SqlSessionFactory getSqlSessionFactory(){
return sqlSessionFactory;
}
}
然后需要在Car.xml
中配置相应的
select
。
<mapper namespace="com.ctq.entity.CarMapper">
<select id="listCar" parameterType="int" resultType="com.ctq.entity.Car">
SELECT * FROM car WHERE parent_id=#{id}
</select>
</mapper>
现在基本的编码都完成了。开始写页面了,新建car.jsp
文件,代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=path %>/js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="<%=path %>/js/car.js"></script>
</head>
<body>
<div id="">
<select name="toCarBrand" id="toCarBrand" onchange="getCar('type')" onkeyup="this.blur();this.focus();">
<option value="" selected>
请选择车牌...
</option>
</select>
<select name="toCarType" id="toCarType" onchange="getCar('num')" onkeyup="this.blur();this.focus();">
<option value="">
请选择车系...
</option>
</select>
<select name="toCarNum" id="toCarNum" onchange="setTheOne(this.name)" onkeyup="this.blur();this.focus();">
<option value="">
请选择型号...
</option>
</select>
</div>
<div id="message"></div>
</body>
</html>
这边我修改了select标签,加入了onchange和onkeyup事件,这样就可以兼容了IE和Firefox了(因为Firefox不支持onchange。)
这边在导入js
文件时,需要先导入
jquery
的
js
文件,然后再导入
car.js
文件。
car.js文件代码如下:
$(document).ready(function() {
getCarBrand();
});
//取所有车牌
function getCarBrand() {
var url = "getCarJSON!listCar.action?carId=0";
$.getJSON(url, function(data) {
setCarBrand(data);
});
}
//设置车牌
function setCarBrand(data) {
var carBrand = document.getElementById("toCarBrand");
$("#message").html("");
$.each(data.lc, function(i, area) {
var value = area.id;
var text = area.name;
$("#message")
.append("<div>value=" + value + ",text=" + text + "</div>");
var option = new Option(text, value);
carBrand.options.add(option);
});
}
//按上级ID取相应的型号
function getCar(name) {
if (name == 'type') {
clearSel(document.getElementById("toCarType")); //清空车牌
var carBrand = document.getElementById("toCarBrand");
if (carBrand.options[carBrand.selectedIndex].value == "")
return;
var carId = carBrand.options[carBrand.selectedIndex].value;
$("#message").html("");
$("#message").append("<div>carId=" + carId + "</div>");
var url = "getCarJSON!listCar.action?carId=" + carId + "";
$.getJSON(url, function(data) {
setCarType(data);
});
} else if (name == 'num') {
clearSel(document.getElementById("toCarNum")); //清空型号
var carNum = document.getElementById("toCarType");
if (carNum.options[carNum.selectedIndex].value == "")
return;
var carId = carNum.options[carNum.selectedIndex].value;
$("#message").html("");
$("#message").append("<div>carId=" + carId + "</div>");
var url = "getCarJSON!listCar.action?carId=" + carId + "";
$.getJSON(url, function(data) {
setCarNum(data);
});
}
}
//当改变车牌时设置对应系列
function setCarType(data) {
var carType = document.getElementById("toCarType");
var value1=null;
var text1="请选择对应的车系";
var option1=new Option(text1,value1);
carType.options.add(option1);
$.each(data.lc, function(i, area) {
var value = area.id;
var text = area.name;
var option = new Option(text, value);
carType.options.add(option);
});
}
//当改变型号时设置对应的具体型号
function setCarNum(data) {
var carNum = document.getElementById("toCarNum");
var value1=null;
var text1="请选择对应的型号";
var option1=new Option(text1,value1);
carNum.options.add(option1);
$.each(data.lc, function(i, area) {
var value = area.id;
var text = area.name;
var option = new Option(text, value);
carNum.options.add(option);
});
}
//设置具体的某一个
function setTheOne(data){
$("#message").html("");
var theOne=document.getElementById("toCarNum");
var value=theOne.value;
$("#message").append("<div>value=" + value + "</div>");
}
// 清空下拉列表
function clearSel(oSelect) {
while (oSelect.childNodes.length > 0) {
oSelect.removeChild(oSelect.childNodes[0]);
}
}
这里需要掌握相应的jquery
操作,
jquery
可以方便的实现一些增加
html
标签的功能。
好了,配置好相应的tomcat
内容,效果图:
实现的功能还很简单,有很多的地方自己也没搞清楚。希望能帮到一些人,有什么优化的方法和意见的话,欢迎可以共同研究下。
相关推荐
Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用MyEclipse 10运行出来.并且付有sql脚本.可直接导入运行.并且经本人...
maven构建项目,简单的struts2、spring、mybatis结构实现,页面展示用的easyui
Springmvc+maven+ajax+jquery+json+mybatis做的异步登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用IntelliJ IDEA 13.1.3运行出来.并且付有sql脚本.可直接导入运行...
Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用Eclipse和IntelliJ IDEA 13.1.3均可运行出来.并且付有sql脚本.可直接...
Struts+Spring+Mybatis+EasyUI(jQuery)注解案例。采用注解的方式跟踪代码依赖性,实现替代配置文件功能。里面包含了平时用的增删改查及分页,分页查询时用的是存储过程,提高了数据库的性能。代码简单、易懂。
注:此项目是用IntelliJ IDEA 13.1.3此软件编写而成,不过和myeclipse都差不多,本项目包含SpringMVC+JSON+mybatis+jQuery+Ajax+Maven做的无刷新登录,注册,修改密码,拦截器,如果用户没有登录则不能进行相应操作...
Struts2+maven+spring+mybatis整合,并实现注册功能实例。
一个简单的spring+struts2+hibernate+mybatis整合(数据库脚本放在项目资源文件的sql目录下) 因为没想好mvc用springmvc好,还是struts2好 所以没有整合进去
struts2+spring+mybatis框架,附带数据库建表,适合初学者搭建环境。
基于注解的Spring+Struts2+Mybatis+Maven项目,Spring 3.0 Struts2 Mybatis3.0
Eclipse+Struts2+Spring+MyBatis+json+gson环境搭建
Eclipse+Struts2+Spring+MyBatis+jQuery整合教程,Eclipse+Struts2+Spring+MyBatis+jQuery整合教程.
基于Spring Boot + MyBatis + thymeleaf + MySQL + jQuery + ajax等实现轻便的图书借阅管理系统。
spring+mybatis+struts框架
spring+mybatis+struts框架 spring+mybatis+struts框架
框架 ssh maven struts spring mybatis 亲测可执行
本工程实现了springmvc+mybatis+jquery easyui+json+log4j整合开发,jar包齐全可直接二次开发,本项目已通过测试。
OA项目,使用SSM框架开发,使用EASYUI前端AJAX的JSON传值实现,对数据进行合理封装。
使用maven整合了struts2+spring+mybatis+springMVC四种开源框架,oracle数据库