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 相关文章推荐
60行js代码实现俄罗斯方块
Mar 31 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 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
第七节 类的静态成员 [7]
2006/10/09 PHP
php 中include()与require()的对比
2006/10/09 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python正则表达式match和search用法实例
2015/03/26 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
Python hashlib模块的使用示例
2020/10/09 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
公司薪酬管理制度
2014/01/31 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
python异步的ASGI与Fast Api实现
2021/07/16 Python
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript