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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
Position属性之relative用法
Dec 14 Javascript
vue-cli常用设置总结
Feb 24 Javascript
seajs下require书写约定实例分析
May 16 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
vue-router实现编程式导航的代码实例
Jan 19 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
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP创建XML接口示例
2019/07/04 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
JS判定是否原生方法
2013/07/22 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
Python正则表达式介绍
2012/08/06 Python
详解Python中的日志模块logging
2015/06/19 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
Python工厂函数用法实例分析
2018/05/14 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
浅谈python中get pass用法
2019/03/19 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
最新计算机专业自荐信
2013/10/16 职场文书
七一讲话心得体会
2014/09/05 职场文书
聚会通知怎么写
2015/04/23 职场文书
行政答辩状范文
2015/05/21 职场文书
考研经验交流会策划书
2015/11/02 职场文书
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技