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

 更新时间:2017年11月29日 16:37:08   作者:9_张晓  
本篇文章主要介绍了easyui下拉框动态级联加载的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

相关文章

  • jQuery height()、innerHeight()、outerHeight()函数的区别详解

    jQuery height()、innerHeight()、outerHeight()函数的区别详解

    这篇文章主要介绍了jQuery height()、innerHeight()、outerHeight()函数的区别详解,需要的朋友可以参考下
    2016-05-05
  • 从Ajax到JQuery Ajax学习

    从Ajax到JQuery Ajax学习

    从Ajax到JQuery Ajax学习
    2007-02-02
  • 基于jquery的滚动鼠标放大缩小图片效果

    基于jquery的滚动鼠标放大缩小图片效果

    基于jquery的滚动鼠标放大缩小图片效果,需要的朋友可以参考下。
    2011-10-10
  • jquery动态赋值id与动态取id方法示例

    jquery动态赋值id与动态取id方法示例

    这篇文章主要给大家介绍了关于jquery动态赋值id与动态取id的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
    2017-08-08
  • jQuery中:focus选择器用法实例

    jQuery中:focus选择器用法实例

    这篇文章主要介绍了jQuery中:focus选择器用法,以实例形式分析了:focus选择器的功能、定义及匹配获取焦点元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jquery实现无缝轮播图

    jquery实现无缝轮播图

    这篇文章主要为大家详细介绍了jquery实现无缝轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 读jQuery之十三 添加事件和删除事件的核心方法

    读jQuery之十三 添加事件和删除事件的核心方法

    最近看完了添加事件和删除事件的核心方法,忍不住想把jQuery的事件模块抠出来。jQuery的代码是非常内聚的,一环套一环。想独立出来不容易。
    2011-08-08
  • jQuery随手笔记之常用的jQuery操作DOM事件

    jQuery随手笔记之常用的jQuery操作DOM事件

    Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,本文给大家介绍jQuery随手笔记之常用的jQuery操作DOM事件,需要的朋友参考下
    2015-11-11
  • jQuery基本选择器选择元素使用介绍

    jQuery基本选择器选择元素使用介绍

    基本选择器:是jQuery中使用最频繁的选择器,它由元素Id、Class、元素名、多个选择符组成,通过基本选择器可以实现大多数页面元素的查找,感兴趣的朋友可以参考下哈
    2013-04-04
  • jQuery实现表格隔行换色

    jQuery实现表格隔行换色

    这篇文章主要为大家详细介绍了jQuery实现表格隔行换色,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09

最新评论