easyui的下拉框动态加载数据，高校中要根据首先查询所有学院，然后根据学院动态加载课程。下面看如何实现。
1.界面效果
2. html + js代码
rush:xhtml;">
学院名称：
Box" style="width:30%;" id="collegeName">
课程名称：
Box" style="width:30%;" id="courseName">
rush:js;">
$(function() {
// 下拉框选择控件，下拉框的内容是动态查询数据库信息
$('#collegeName').comboBox({
url:'${pageContext.request.contextpath}/loadInstitution',editable:false,//不可编辑状态
cache: false,panelHeight: '150',valueField:'id',textField:'institutionName',onHidePanel: function(){
$("#courseName").comboBox("setValue",'');//清空课程
var id = $('#collegeName').comboBox('getValue');
//alert(id);
$.ajax({
type: "POST",url: '${pageContext.request.<a href="https://www.jb51.cc/tag/contextpath/" target="_blank" class="keywords">contextpath</a>}/loadCourse?id=' + id,cache: false,dataType : "json",success: function(data){
$("#courseName").combo<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>("loadData",data);
}
});
} });
$('#courseName').comboBox({
//url:'itemmanage!categorytbl',//不可编辑状态
cache: false,//自动高度适合
valueField:'id',textField:'courseName'
});
});
rush:java;">
@RequestMapping("/loadInstitution")
/**
* 加载学院
* @param
* @param
* @return void
* @exception/throws [违例类型] [违例说明]
* @see [类、类#方法、类#成员]
* @deprecated
*/
public void loadInstitute(HttpServletRequest request,HttpServletResponse response) throws Exception {
try {
JackJsonUtils JackJsonUtils = new JackJsonUtils();
List institutionList = institutionBean
.queryAllColleage();
System.out.println("学院list大小=====" + institutionList.size());
String result = JackJsonUtils.BeanToJson(institutionList);
System.out.println(result);
JsonUtils.outJson(response,result);
} catch (Exception e) {
logger.error("加载学院失败",e);
}
}
@RequestMapping("/loadCourse")
/**
- 动态加载课程
- @param
- @param
- @return void
- @exception/throws [违例类型] [违例说明]
- @see [类、类#方法、类#成员]
- @deprecated
*/
public void loadCourse(HttpServletRequest request,HttpServletResponse response) throws Exception {
JackJsonUtils JackJsonUtils = new JackJsonUtils();
String id = request.getParameter("id");
System.out.println("学院id====" + id);
try {
if(id != null && id != ""){
ListlistCourseInfoList = courseBean
.queryAllCourseInfos(id);
System.out.println("课程list大小=====" + listCourseInfoList.size());
String result = JackJsonUtils.BeanToJson(listCourseInfoList);
System.out.println(result);
JsonUtils.outJson(response,result);
}
} catch (Exception e) {
logger.error("加载课程失败",e);
}
}
根据基础提供的接口查询学院和课程，转换为json格式后绑定到前台控件上。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/js/34946.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
