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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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
再说下636单管机
2021/03/02 无线电
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
javascript事件模型代码
2007/07/01 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Python检测网络延迟的代码
2018/05/15 Python
Python3几个常见问题的处理方法
2019/02/26 Python
详解python之heapq模块及排序操作
2019/04/04 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
双十佳事迹材料
2014/01/29 职场文书
市场专员岗位职责
2014/02/14 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
开学典礼观后感
2015/06/15 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python