easyui下拉框动态级联加载的示例代码
程序员文章站
2022-03-20 21:45:34
easyui的下拉框动态加载数据,高校中要根据首先查询所有学院,然后根据学院动态加载课程。下面看如何实现。
1.界面效果
2. html + js代码...
easyui的下拉框动态加载数据,高校中要根据首先查询所有学院,然后根据学院动态加载课程。下面看如何实现。
1.界面效果
2. html + js代码
<span>学院名称:</span> <input class="easyui-combobox" style="width:30%;" id="collegename"> <span>课程名称:</span> <input class="easyui-combobox" style="width:30%;" id="coursename"><br/>
$(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<institution> 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 != ""){ list<courseinfo> 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格式后绑定到前台控件上。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。