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


Posted in Javascript onNovember 29, 2017

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

1.界面效果

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
js判断两个数组相等的5种方法
May 06 Javascript
纯js实现隔行变色效果
Nov 29 #Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 #Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 #Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 #Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 #Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 #Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 #Javascript
You might like
php下使用SMTP发邮件的代码
2008/01/10 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
jquery 问答知识整理
2010/02/11 Javascript
jquery 学习笔记一
2010/04/07 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
python聊天程序实例代码分享
2013/11/18 Python
python处理PHP数组文本文件实例
2014/09/18 Python
Python异常学习笔记
2015/02/03 Python
Python数据类型学习笔记
2016/01/13 Python
python生成器表达式和列表解析
2016/03/10 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
windows支持哪个版本的python
2020/07/03 Python
python实现canny边缘检测
2020/09/14 Python
公司总经理助理岗位职责
2014/07/09 职场文书
2014年政工师工作总结
2014/12/18 职场文书
初中作文评语
2014/12/25 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
js前端图片加载异常兜底方案
2022/06/21 Javascript