easyui下拉框动态级联加载的示例代码

easyui下拉框动态级联加载的示例代码

easyui的下拉框动态加载数据，高校中要根据首先查询所有学院，然后根据学院动态加载课程。下面看如何实现。

1.界面效果

2. html + 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.contextPath}/loadCourse?id=' + id,

cache: false,

dataType : "json",

success: function(data){

$("#courseName").combobox("loadData",data);

}

});

}

});

$('#courseName').combobox({

//url:'itemManage!categorytbl',

editable:false, //不可编辑状态

cache: false,

panelHeight: '150',//自动高度适合

valueField:'id',

textField:'courseName'

});

});

3.后台代码

@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大小=====" http://+ institutionList.size());

String result = JackJsonUtils.BeanToJson(institutionList);

System.out.println(result);

JsonUtils.outJson(response, result);

} catch (Exception e) {

logger.error("加载学院失败", e); http://

}

}

@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 != ""){

List listCourseInfoList = 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格式后绑定到前台控件上。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。