쉬운 UI 드롭다운 상자의 동적 계단식 로딩

이 기사에서는 easyui 드롭다운 상자의 동적 캐스케이드 로딩 샘플 코드를 주로 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 살펴보겠습니다. easyui의 드롭다운 상자는 데이터를 동적으로 로드합니다. 대학에서는 모든 대학을 먼저 쿼리한 다음 대학에 따라 코스를 동적으로 로드합니다. 이를 달성하는 방법을 살펴보겠습니다.

1. 인터페이스 효과

2.html + js code

<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 형식으로 변환하여 바인딩합니다. 프론트 엔드 제어.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Electron을 사용하여 React+Webpack 데스크톱 애플리케이션 구축(자세한 튜토리얼)

WeChat 미니 프로그램에서 왼쪽 및 오른쪽 슬라이딩을 구현하는 방법

JavaScript에는 어떤 특별한 데이터 유형이 있나요

WeChat 미니 프로그램에서 ajax를 사용하여 서버 데이터를 요청하는 방법

위 내용은 쉬운 UI 드롭다운 상자의 동적 계단식 로딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!