做查询页面,查询条件比较多的时候往往会涉及到级联。举个简单的例子,拿教务系统来说,我们要查询教学计划信息,查询条件是入学批次、学生层次(专升本、高升专)、专业、课程。
它们之间有什么级联关系呢?入学批次影响学生层次(某个入学批次可能只有专升本或者高升专一个学生层次)、专业、课程,学生层次影响专业、课程,专业又影响课程。也就是说当选择入学批次时,学生层次、专业和课程的下拉框会局部刷新,选择学生层次时,专业和课程的下拉框会局部刷新,选择专业时,课程的下拉框也会局部刷新。
我们当然不希望已经选择的操作随着页面的刷新又被初始化,再者前面提到选择一项后相关的下拉框是局部刷新。很容易想到用填充页面的方法来实现级联。
笔者的填充方法是通过提交JS,由Controller获取数据,将数据传到辅助的JSP页面,再用回调函数将辅助JSP页面中的数据填充给相应下拉框。说的抽象,直接上代码了,四级级联稍微麻烦一些,知道原理后也好做,笔者上三级级联的代码。级联样式如下图:
JSP页面代码:
复制代码 代码如下:
<table>
<tr>
<td width="400px" align="left">入学批次:<SELECT NAME="grade"
id="grade" onchange="refreshEduLevelAndSpecialAjax();"> //选择入学批次会刷新层次和专业
<OPTION VALUE="0">
--请选择--
<c:forEach items="${gradeInfo}" var="gradeInfo">
<OPTION VALUE="${gradeInfo.gradeName}">${gradeInfo.gradeName}
</c:forEach>
</SELECT></td>
<td width="400px" align="left">统考课程:<SELECT
NAME="uniExamCourseId" id="uniExamCourseId">
<OPTION VALUE="0">
--请选择--
<c:forEach items="${unifiedExamCourseList}" var="uniExamCourse">
<OPTION VALUE="${uniExamCourse.id}">${uniExamCourse.uniExamCourseName}
</c:forEach>
</SELECT></td>
</tr>
<tr>
<td colspan="2" id="refreshEduLevelAndSpecialAjax"> //设置ID,用于填充层次和专业的下拉框
<table>
<tr>
<td width="400" align="left">层 次:<SELECT
NAME="eduLevelId" id="eduLevelId"
onchange="refreshSpecialAjax();"> //选择层次后刷新专业
<OPTION VALUE="0">--请选择--</OPTION>
<c:forEach items="${educationLevel}" var="educationLevel">
<OPTION VALUE="${educationLevel.id}">${educationLevel.educationLevelName}
</c:forEach>
</SELECT></td>
<td width="400" align="left" id="refreshSpecialAjax">专 业:<SELECT //设置ID,用于填充专业的下拉框
NAME="specialId" id="specialId">
<OPTION VALUE="0">--请选择--</OPTION>
<c:forEach items="${specialList}" var="special">
<OPTION VALUE="${special.id}">${special.specialName}
</c:forEach>
</SELECT></td>
</tr>
</table>
</td>
</tr>
</table>
JS的代码如下:
复制代码 代码如下:
//JavaScript Document
var xmlHttp; //用于保存XMLHttpRequest对象的全局变量
//用于创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
}
}
function refreshEduLevelAndSpecialAjax() {
var grade = document.getElementById("grade").value;
refreshEduLevelAndSpecial(grade);
}
function refreshEduLevelAndSpecial(grade) {
createXmlHttp(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = refreshEduLevelAndSpecialElement; //设置回调函数
xmlHttp.open("POST", "eduLevelAndSpecialByGradeNameInSpecialDetail",
true); //发送POST请求
xmlHttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlHttp.send("grade=" + grade);
}
//处理服务器返回的信息 更新层次专业下拉框
function refreshEduLevelAndSpecialElement() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//此处xmlHttp.responseText是请求的*Controller的某个方法返回的渲染页面的源代码
document.getElementById("refreshEduLevelAndSpecialAjax").innerHTML = xmlHttp.responseText;
}
}
}
function refreshSpecialAjax() {
var grade = document.getElementById("grade").value;
var eduLevelId = document.getElementById("eduLevelId").value;
refreshSpecial(grade, eduLevelId);
}
function refreshSpecial(grade, eduLevelId) {
createXmlHttp(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = refreshSpecialElement; //设置回调函数
xmlHttp.open("POST", "specialByGradeNameAndEduLevelIdInSpecialDetail",
true); //发送POST请求
xmlHttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlHttp.send("grade=" + grade + "&eduLevelId=" + eduLevelId);
}
//处理服务器返回的信息 更新专业下拉框
function refreshSpecialElement() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//此处xmlHttp.responseText是请求的*Controller的某个方法返回的渲染页面的源代码
document.getElementById("refreshSpecialAjax").innerHTML = xmlHttp.responseText;
}
}
}
Controller代码:
复制代码 代码如下:
@RequestMapping(value = "/eduLevelAndSpecialByGradeNameInSpecialDetail")
public ModelAndView getEduLevelAndSpecialByGradeNameInSpecialDetail(HttpServletRequest request,
HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
String gradeName=request.getParameter("grade");
String eduLevelId=request.getParameter("eduLevelId");
if(gradeName==null||gradeName.equals("0")){
gradeName="null";
}
if(eduLevelId==null||eduLevelId.equals("0")){
eduLevelId="null";
}
ArrayList<UtilObject> eduLevelList=uess.getEduLevelIdByGradeNameInSpecialDetail(gradeName);
ArrayList<UtilObject> specialIdList=uess.getSpecialIdByGradeNameAndEduLevelIdInSpecialDetail(gradeName, eduLevelId);
mav.addObject("educationLevel", eduLevelList);
mav.addObject("specialList", specialIdList);
mav.setViewName("scoreManage/uniExamScore/eduLevelAndSpecialAjax");
return mav;
}
@RequestMapping(value = "/specialByGradeNameAndEduLevelIdInSpecialDetail", method = RequestMethod.POST)
public ModelAndView getSpecialByGradeNameAndEduLevelIdInSpecialDetail(HttpServletRequest request,
HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
String gradeName=request.getParameter("grade");
String eduLevelId=request.getParameter("eduLevelId");
System.out.println("grade:"+gradeName+" eduLevelId:"+eduLevelId);
if(gradeName==null||gradeName.equals("0")){
gradeName="null";
}
if(eduLevelId==null||eduLevelId.equals("0")){
eduLevelId="null";
}
ArrayList<UtilObject> specialList=uess.getSpecialIdByGradeNameAndEduLevelIdInSpecialDetail(gradeName, eduLevelId);
mav.addObject("specialList", specialList);
mav.setViewName("scoreManage/uniExamScore/specialAjax");
return mav;
}
后台代码没有给出来,但应该看得懂,就是获取后台数据传到eduLevelAndSpecialAjax.jsp和specialAjax.jsp页面。这两个页面用于填充原页面,通过ID来填充相应区域,两个页面代码如下。
eduLevelAndSpecialAjax.jsp辅助页面:
复制代码 代码如下:
<td id="refreshEduLevelAndSpecialAjax"> //ID用于填充原页面
<table>
<tr>
<td width="400px" align="left">层 次:<select
id="eduLevelId" name="eduLevelId" onchange="refreshSpecialAjax();">
<option value="0">--请选择--</option>
<c:forEach items="${educationLevel}" var="educationLevel">
<option value="${educationLevel.id}">${educationLevel.name}</option>
</c:forEach>
</select></td>
<td width="400px" align="left" id="refreshSpecialAjax">专 业:<SELECT //ID用于填充原页面
NAME="specialId" id="specialId">
<option value="0">--请选择--</option>
<c:forEach items="${specialList}" var="special">
<OPTION VALUE="${special.id}">${special.name}
</c:forEach>
</SELECT></td>
</tr>
</table>
</td>
specialAjax.jsp辅助页面:
复制代码 代码如下:
<td width="400" align="left" id="refreshSpecialAjax">专 业:<SELECT
NAME="specialId" id="specialId"> //ID用于填充原页面
<option value="0">--请选择--</option>
<c:forEach items="${specialList}" var="special">
<OPTION VALUE="${special.id}">${special.name}
</c:forEach>
</SELECT></td>
这样就在JSP页面实现了填充。
JSP,select标签,级联
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 《粤语超白金 百听不厌的经典金曲 2CD》[WAV/分轨][1.3GB]
- 群星.1994-全世界精丫华星】【WAV+CUE】
- 杜德伟.1997-知.解2CD【滚石】【WAV+CUE】
- 群星.2022-一不小心喵上你原声大碟【TME影音】【FLAC分轨】
- 《战锤40K星际战士2》卡在正在加入服务器解决方法
- 《勇者斗恶龙怪物仙境3》玩法内容介绍
- 《幸福工厂》无限报错解决方法
- 交错战线原始交易所推荐角色一览
- 战锤40K星际战士2战术职业介绍|战术职业技能效果一览
- 战锤40K星际战士2突击职业介绍|突击职业技能效果一览
- [妙音金曲]群星《悲情咖啡屋》(黑胶)2CD[DTS-WAV]
- 阿兰·达瓦卓玛《A-Lan阿兰唯美歌姬》2CD[DTS-WAV]
- 【小提琴】陈立新《思乡曲》2004[FLAC+CUE]
- 《战地》新作明年初大规模测试!EA已内部测试一年
- 《GTAOL》PC版时隔多年更新反作弊!小助手宣布跑路