easyui의 드롭다운 상자의 동적 캐스케이드 로딩 구현 방법(코드 포함)

이번에는 easyui 드롭다운 상자의 동적 계단식 로딩 구현 방법(코드 포함)을 가져오겠습니다. 보세요. easyui의 드롭다운 상자는 데이터를 동적으로 로드합니다. 대학에서는 모든 대학을 먼저 쿼리한 다음 대학에 따라 코스를 동적으로 로드합니다. 이를 달성하는 방법을 살펴보겠습니다.

1.인터페이스 효과

2. HTML + JS 코드

<span>学院名称：</span> 
<input> 
<span>课程名称：</span> 
<input><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); 
    } 
  }</courseinfo></institution>

는 재단에서 제공하는

인터페이스

를 기반으로 대학 및 학과를 조회하고 이를 json 형식으로 변환하여 프런트엔드 컨트롤에 바인딩합니다. ​​​​​이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue 구성 요소를 작성하는 방법은 무엇인가요?

JSON 데이터를 가져와 JS를 통해 로드하는 단계에 대한 자세한 설명

JS는 어떻게 요소를 포물선을 따라 이동하게 합니까? 궤적

위 내용은 easyui의 드롭다운 상자의 동적 캐스케이드 로딩 구현 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!