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 相关文章推荐
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
jquery实现动态画圆
Dec 04 Javascript
JavaScript错误处理
Feb 03 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
详解Angular路由之路由守卫
May 10 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
详解JavaScript的变量
Apr 04 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 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
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
JS实现li标签的删除
2019/04/12 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
代码详解django中数据库设置
2019/01/28 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
Python递归函数特点及原理解析
2020/03/04 Python
python实现飞机大战项目
2020/03/11 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
实习鉴定范文
2013/12/19 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
企业安全生产承诺书
2014/05/22 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
太空授课观后感
2015/06/17 职场文书
婚礼家长致辞
2015/07/27 职场文书
redis实现排行榜功能
2021/05/24 Redis
Django drf请求模块源码解析
2021/06/08 Python