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

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

(0)

相关推荐

  • jQuery使用EasyUi实现三级联动下拉框效果

    其它的都不说,使用easyui实现三级联动主要就是一层套一层,大家且看代码 html表单 <input id="txtPipeRowName" style="width:150px;"> <input id="txtPipeName" style="width:150px;"> easyUi的Combobox: // 一层Combo var srmCombx = $("#txtShouName

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

    easyui的下拉框动态加载数据,高校中要根据首先查询所有学院,然后根据学院动态加载课程.下面看如何实现. 1.界面效果 2. html + js代码 <span>学院名称:</span> <input class="easyui-combobox" style="width:30%;" id="collegeName"> <span>课程名称:</span> <input cla

  • 在element-ui的select下拉框加上滚动加载

    在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一项非常"漂亮"的交互体验数据--分页 这不分页还好,一分页对超过10条数据之后的本来也不多,就20条,偏偏还得做个分页器.(假设为10条) 此时,如果能够像购物商城那样拖拽到底部自动加载新数据就好了. 于是<在element-ui的select下拉框加上滚动加载>诞生了. 这里

  • Jquery EasyUI中弹出确认对话框以及加载效果示例代码

    复制代码 代码如下: //confirm function Confirm(msg, control) {    $.messager.confirm("确认", msg, function (r) {        if (r) {            return true;        }    });    return false;} 复制代码 代码如下: //Loadfunction Load() {    $("<div class=\"da

  • vue移动端下拉刷新和上滑加载

    本文实例为大家分享了vue移动端下拉刷新和上滑加载的具体代码,供大家参考,具体内容如下 组件 <template> <div class="mu-load-more" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)"> <div class="mu-re

  • js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标

    引言 前段时间发了一个编辑器的插件,忙完后自己再次进行了详细的测试,然后心里冒出一句:"这谁写的这么奇葩的插件?完全没什么luan用啊!" 自己做了让自己不满意的事,咋整?男人不怕累,花了时间重写(为世界上所有像我一样勤劳的男人点赞)~ 思维导图 在小生看来,在开发每一个新功能的时候都应该做到心中有一张思维导图:功能实现逻辑和实现功能大致的方法.当然我们不可能在还没动手 前就考虑得面面俱到,但在正式开发之前心里对整个流程有个清晰的印象肯定会让我们在动手时愈加流畅(喝口娃哈哈美滋滋,看图

  • bootstrap下拉框动态赋值方法

    以前一直使用easyui,发现越来越跟不上现在前端的一些技术,所以改用bootstrap,然后发现好多包括简单的下拉赋值都不会了,这里上网找了下,然后发现下面这个不错,用上了,特此记录一下 <script type="text/javascript"> /** */ window.onload = function () { showsmsselect(); } function showsmsselect() { $.ajax({ url : "${pageCo

  • Flutter 给列表增加下拉刷新和上滑加载更多功能

    有状态组件 当 Flutter 的页面需要动态更新数据的时候,就会涉及到 UI 组件需要根据数据变化更新,此时也就意味着组件有了"状态".这就类似 React 的类组件和函数组件(只是后续 React 使用了勾子函数实现了函数组件也可以有状态).在 Flutter 中,组件也分为无状态组件(StatelessWidget)和有状态组件(StatefulWidget),一般尽量使用无状态组件.但是如果组件本身需要维护自身状态的时候,就需要使用有状态组件了.有状态组件的定义形式如下: //

  • vue如何实现el-select下拉选项的懒加载

    目录 滚动加载的核心逻辑 在vue中处理数据懒加载 在vue组件中使用指令 v-lazy-load Element 指令v-infinite-scroll 下拉选择是常用的用户交互选择的操作:常用固定选择项或者动态渲染选择项. 实际项目中存在数据量大,一次性渲染很多数据会造成下拉卡顿的问题,通过滚动懒加载,逐步增加下拉选项. 滚动加载的核心逻辑 通过监听容器的滚动事件,滚到最底部时,执行加载数据函数. interface IScrollOption { distance: number; //

  • 基于iScroll实现下拉刷新和上滑加载效果

    本文实例为大家分享了iScroll下拉刷新上滑加载展示的具体代码,供大家参考,具体内容如下 html代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=devi

  • Android手把手教大家制作APP首页(下拉刷新、自动加载)

    一.概述 作为一名三年Android开发经验的程序员,今天和大家一起实战一款APP的首页功能,这个首页在我们平时接触中还是很常见的,虽然页面简单,但是里面涉及的功能点还是挺多的.代码如有不足的还望各路同仁指点一二. 页面中使用的开发库: 整个首页架构使用的是LRecyclerView,包含下拉刷新和自动加载功能 compile 'com.github.jdsjlzx:LRecyclerView:1.3.3' 无限循环轮播图使用的是convenientbanner,效果还是很顺畅的,还可以根据自己

随机推荐