`
relic6
  • 浏览: 75294 次
  • 性别: Icon_minigender_1
  • 来自: 温州
社区版块
存档分类
最新评论

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

<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 内容,效果图:

 

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


 

 

分享到:
评论
15 楼 yin_bp 2011-06-23  
relic6 写道
夜神月 写道
spring+springmvc+mybatis+rest岂不是更爽

呵呵,正好目前用着这些框架,蛮爽的。


bboss aop/ioc+bboss mvc+bboss persistent+bboss rest岂不是更更爽
14 楼 yin_bp 2011-06-23  
zb7503 写道
yangguo 写道
一个小功能做得好辛苦啊。

建议使用 mybatis-spring 的 mapper,再自动生成 mapper.xml


+1
struts2完全可以用spring mvc 代替的。


struts2和spring mvc 完全可以被bboss mvc替换
13 楼 uucall0123 2011-06-22  
<p>好帖 啊 。。。顶起</p>
12 楼 relic6 2011-06-02  
夜神月 写道
spring+springmvc+mybatis+rest岂不是更爽

呵呵,正好目前用着这些框架,蛮爽的。
11 楼 夜神月 2011-05-31  
spring+springmvc+mybatis+rest岂不是更爽
10 楼 benqend 2011-05-17  
1.既然用了spring,怎么不让spring管理mybatis
2.struts2的result中最好是有root属性吧,要不整个bean都会被编译成json
9 楼 zb7503 2011-05-12  
yangguo 写道
一个小功能做得好辛苦啊。

建议使用 mybatis-spring 的 mapper,再自动生成 mapper.xml


+1
struts2完全可以用spring mvc 代替的。
8 楼 linhrg 2011-05-11  
怎么没有整个项目的源代码,总是提示有错
7 楼 relic6 2011-04-21  
thzthbthy 写道
你把web.xml的代码也贴出来把,老提示找不到applicationContext.xml


<context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/applicationContext.xml</param-value>
</context-param>

这个在web.xml中配置下
6 楼 myredapple001 2011-04-20  
louisgarcia 写道
LZ好贴!!!!!!!!!


5 楼 thzthbthy 2011-04-20  
你把web.xml的代码也贴出来把,老提示找不到applicationContext.xml
4 楼 yangguo 2011-04-20  
一个小功能做得好辛苦啊。

建议使用 mybatis-spring 的 mapper,再自动生成 mapper.xml
3 楼 thzthbthy 2011-04-20  
对我来说很有价值,love you!!!
2 楼 relic6 2011-03-24  
louisgarcia 写道
LZ好贴!!!!!!!!!

也是参考了论坛的大大们。。还有一些jquery和json 的东西不是很清楚。。也在学习中,希望能提供点参考价值~~~~
1 楼 louisgarcia 2011-03-24  
LZ好贴!!!!!!!!!

相关推荐

    Java二级联动

    在网页设计中,这可能涉及到HTML和CSS的使用,创建多级下拉菜单的结构,以及使用JavaScript进行动态更新。HTML用于定义页面结构,CSS用于美化样式,而JavaScript则用于实现联动效果,监听用户在上级菜单的选择,然后...

    kernel-devel-4.18.0-553.45.1.el8-10.x86-64.rpm

    Rocky Linux 8.10内核包

    Simulink中三阶单环多位量化Σ-Δ调制器的设计与实现-音频带ADC的应用(复现论文或解答问题,含详细可运行代码及解释)

    内容概要:本文档详细介绍了如何在Simulink中设计一个满足特定规格的音频带ADC(模数转换器)。首先选择了三阶单环多位量化Σ-Δ调制器作为设计方案,因为这种结构能在音频带宽内提供高噪声整形效果,并且多位量化可以降低量化噪声。接着,文档展示了具体的Simulink建模步骤,包括创建模型、添加各个组件如积分器、量化器、DAC反馈以及连接它们。此外,还进行了参数设计与计算,特别是过采样率和信噪比的估算,并引入了动态元件匹配技术来减少DAC的非线性误差。性能验证部分则通过理想和非理想的仿真实验评估了系统的稳定性和各项指标,最终证明所设计的ADC能够达到预期的技术标准。 适用人群:电子工程专业学生、从事数据转换器研究或开发的技术人员。 使用场景及目标:适用于希望深入了解Σ-Δ调制器的工作原理及其在音频带ADC应用中的具体实现方法的人群。目标是掌握如何利用MATLAB/Simulink工具进行复杂电路的设计与仿真。 其他说明:文中提供了详细的Matlab代码片段用于指导读者完成整个设计流程,同时附带了一些辅助函数帮助分析仿真结果。

    计算机课后习题.docx### 【计算机科学】研究生入学考试计算机组成原理专项题库设计:考研复习资源集成与优化

    内容概要:该题库专为研究生入学考试计算机组成原理科目设计,涵盖名校考研真题、经典教材课后习题、章节题库和模拟试题四大核心模块。名校考研真题精选多所知名高校的计算机组成原理科目及计算机联考真题,并提供详尽解析,帮助考生把握考研命题趋势与难度。经典教材课后习题包括白中英《计算机组成原理》(第5版)和唐朔飞《计算机组成原理》(第2版)的全部课后习题解答,这两部教材被众多名校列为考研指定参考书目。章节题库精选代表性考题,注重基础知识与重难点内容,帮助考生全面掌握考试大纲要求的知识点。模拟试题依据历年考研真题命题规律和热门考点,精心编制两套全真模拟试题,并附标准答案,帮助考生检验学习成果,评估应试能力。 适用人群:计划参加研究生入学考试并报考计算机组成原理科目的考生,尤其是需要系统复习和强化训练的学生。 使用场景及目标:①通过研读名校考研真题,考生可以准确把握考研命题趋势与难度,有效评估复习成效;②通过经典教材课后习题的练习,考生可以巩固基础知识,掌握解题技巧;③通过章节题库的系统练习,考生可以全面掌握考试大纲要求的各个知识点,为备考打下坚实基础;④通过模拟试题的测试,考生可以检验学习成果,评估应试能力,为正式考试做好充分准备。 其他说明:该题库不仅提供详细的题目解析,还涵盖了计算机组成原理的各个方面,包括计算机系统概述、数据表示与运算、存储器分层、指令系统、中央处理器、总线系统和输入输出系统等。考生在使用过程中应结合理论学习与实践操作,注重理解与应用,以提高应试能力和专业知识水平。

    __UNI__DB9970A__20250328141034.apk.1

    __UNI__DB9970A__20250328141034.apk.1

    minio-rsc-Rust资源

    rust for minio

    4-4-台区智能融合终端功能模块型式规范(试行).pdf

    国网台区终端最新规范

    《基于YOLOv8的化工管道焊缝缺陷检测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    python源码-1个机器学习相关资源

    一个简单的机器学习代码示例,使用的是经典的鸢尾花(Iris)数据集,通过 Scikit-learn 库实现了一个简单的分类模型。这个代码可以帮助你入门机器学习中的分类任务。

    pyqt离线包,pyqt-tools离线包

    pyqt离线包,pyqt-tools离线包

    《基于YOLOv8的船舶机舱灭火系统状态监测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    SQL常用日期和时间函数整理及使用示例

    SQL常用日期和时间函数整理及在sqlserver测试示例 主要包括 1.查询当前日期GETDATE 2.日期时间加减函数DATEADD 3 返回两个日期中指定的日期部分之间的差值DATEDIFF 4.日期格式转换CONVERT(VARCHAR(10),GETDATE(),120) 5.返回指定日期的年份数值 6.返回指定日期的月份数值 7.返回指定日期的天数数值

    GSDML-V2.3-Turck-BL20-E-GW-EN-20160524-010300.xml

    GSDML-V2.3-Turck-BL20_E_GW_EN-20160524-010300.xml

    T_CPCIF 0225-2022 多聚甲醛.docx

    T_CPCIF 0225-2022 多聚甲醛.docx

    《基于YOLOv8的智能仓储货物堆码倾斜预警系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    《基于YOLOv8的智能仓储货物堆码倾斜预警系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计

    蚕豆脱壳机设计.zip

    蚕豆脱壳机设计.zip

    附件2-2:台区智能融合终端入网专业检测单位授权委托书.docx

    台区终端电科院送检文档

    Y6一39一No23.6D离心通风机 CAD().zip

    Y6一39一No23.6D离心通风机 CAD().zip

    django自建博客app

    django自建博客app

    附件3-4:台区智能融合终端全性能试验增值税发票开具确认单.docx

    台区终端电科院送检文档

Global site tag (gtag.js) - Google Analytics