드롭다운 메뉴에 대한 계단식 작업-JS 튜토리얼-php.cn

드롭다운 메뉴에 대한 계단식 작업

亚连

풀어 주다： 2018-05-23 14:38:21

원래의

1807명이 탐색했습니다.

이 글에서는 주로 드롭다운 메뉴의 계단식 작업을 자세히 소개하고, Ajax와 백그라운드 간 데이터의 대화형 전송을 위한 도구 클래스를 공유합니다. 관심 있는 친구들이 참고할 수 있습니다.

개발 중에 우리는 종종 메뉴 레벨을 접하게 됩니다. 국가, 도시, 마을 등의 선택과 같은 작업 국가를 선택하면 다음 메뉴에 해당 국가의 도시가 나열됩니다. 도시를 선택하면 다음 메뉴에 해당 도시가 나열됩니다.

이 메뉴의 계단식 동작을 해결하는 방법은 두 가지가 있습니다.

①js를 사용하여 구현하고, 페이지에서 사용되는 계단식 데이터를 js에 넣고, 페이지가 로드되면 js Display를 해당 선택에 사용합니다. 이 방법에는 여러 가지 해결 방법이 있는데, 가장 직관적인 방법은 다차원 배열에 넣는 것입니다. 사람마다 생각이 다르기 때문에 여기서는 자세히 설명하지 않겠습니다.

②ajax를 사용하여 비동기적이고 동적으로 로드한 다음 해당 선택 항목에 표시하는 방법은 매우 편리하며 개발에 사용하는 것이 좋습니다.

개발 중인 작은 예를 살펴보겠습니다.

JSP 짧은 페이지:

      <p class="form-group">
        <label class="col-sm-2 control-label">设备类别</label>
        <p class="col-sm-4">
          <select class="basic-single" name="codeCategory" onchange="showCodeSubCate()" id="codeCategory" style="width: 100%">
          
          </select>
        </p>
        <label class="col-sm-2 control-label">设备子类</label>
        <p class="col-sm-4">
          <select class="basic-single" name="codeSubCategory" id="codeSubCate" disabled="disabled" style="width: 100%">
            <option value="">--请选择--</option>
          </select>
        </p>
</p>

로그인 후 복사

이 페이지에는 장치 분류와 장치 하위 클래스라는 두 가지 옵션이 포함되어 있으며, 그 중 장치 분류는 하나의 레벨 메뉴입니다. 장치 하위 범주는 보조 메뉴이며, 장치 하위 범주의 표시 내용은 장치 분류에 따라 결정됩니다.

Ajax 코드 조각을 살펴보겠습니다.

function addCodeCategory(){
    $.ajax({
      url: "<%=request.getContextPath()%>/facilitydict/showCodeCategory",
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      type: "GET",  //请求方式
      success: function(result) {
        result = $.parseJSON(result);
        var data = result.data;
        var codeCates = data.split(",");
        str =&#39;<option value="6801">--请选择--</option>&#39;;
        for(x in codeCates){
          str+=&#39;<option value="&#39;+codeCates[x]+&#39;">&#39;+codeCates[x]+&#39;</option>&#39;;
        }
        $("#codeCategory").html(str);
        
      }
    });
  }
  
  function showCodeSubCate(){
    $("#codeSubCate").prop("disabled","");//将设备子类的select解除锁定
    var target = $("#codeCategory option:selected").text();
    $.ajax({
      url: "<%=request.getContextPath()%>/facilitydict/showCodeSubCategory",
      data : {codeCategory:target},
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      type: "GET",  //请求方式
      success: function(result) {
        result = $.parseJSON(result);
        var data = result.data;
        var codeCates = data.split(",");
        var str="";
        for(x in codeCates){
          str+=&#39;<option value="&#39;+codeCates[x]+&#39;">&#39;+codeCates[x]+&#39;</option>&#39;;
        }
        $("#codeSubCate").html(str);
      }
    });
  }

로그인 후 복사

기기 카테고리 선택기의 콘텐츠가 변경되면 showCodeSubCate 함수가 트리거되어 데이터를 얻기 위해 배경을 요청하는 것을 보는 것은 어렵지 않습니다. , 요청된 데이터가 추가됩니다. 장치 하위 클래스에 해당하는 선택으로 이동합니다. 백그라운드 코드의 구현은 다음과 같습니다(컨트롤러 메소드만 게시됨):

@RequestMapping("/showCodeCategory")
  @ResponseBody
  public Result<String> searchCodeCategory() {

    Result<String> rs = new Result<>();
    List<String> codeCategorys = facilityDictService.searchCodeCategory();
    String codeCate = StringUtil.collectionToCommaDelimitedString(codeCategorys);
    rs.setData(codeCate);
    return rs;

  }

  @RequestMapping("/showCodeSubCategory")
  @ResponseBody
  public Result<String> searchCodeSubCategory(HttpServletRequest request) {
    String codeCategory = request.getParameter("codeCategory");
    Result<String> rs = new Result<>();
    List<String> codeSubCategorys = facilityDictService.searchCodeSubCategory(codeCategory);
    String codeCate = StringUtil.collectionToCommaDelimitedString(codeSubCategorys);
    rs.setData(codeCate);
    return rs;
  }

로그인 후 복사

이 두 메소드는 각각 위의 두 ajax 요청에 해당합니다. 소개할 가치가 있는 것은 백그라운드에서 반환되는 데이터입니다. 반환 값 유형은 Result이고, 반환 값 유형은 도구 클래스이며, 구체적인 구현은 내 블로그에서 볼 수 있습니다. 링크는 http://www.cnblogs.com/blog411032/p/5799669.html입니다.

ajax는 백그라운드와 상호 작용하여 데이터를 전송합니다. 도구 클래스

 public class Result<T> implements Serializable {

  private static final long serialVersionUID = 3637122497350396679L;

  private boolean success;
  private T data;
  private String msg;

  public Result() {
  }

  public Result(boolean success) {
    this.success = success;
  }

  public boolean isSuccess() {
    return success;
  }

  public void setSuccess(boolean success) {
    this.success = success;
  }

  public T getData() {
    return data;
  }

  public void setData(T data) {
    this.data = data;
  }

  public String getMsg() {
    return msg;
  }

  public void setMsg(String msg) {
    this.msg = msg;
  }

  public Result(boolean success, String msg) {
    super();
    this.success = success;
    this.msg = msg;
  }

  public Result(boolean success, T data) {
    super();
    this.success = success;
    this.data = data;
  }

}

로그인 후 복사

이 클래스는 프런트 엔드 및 백엔드 상호 작용에 큰 편의를 제공합니다.

다음은 프런트 엔드 및 백엔드 상호 작용의 Ajax 상호 작용입니다. 백엔드:

프론트엔드 ajax 코드:

$.ajax({
      url: "<%=request.getContextPath()%>/supp/deleteSupp",
      data : {supplierId:supplierId},
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      type: "GET",  //请求方式
      success: function(data) {
        var rs = eval(&#39;(&#39;+data+&#39;)&#39;);
        flag = rs.success;
        if(flag){
          alert("删除成功!");
        }
      }
    });

로그인 후 복사

아래는 배경 자바 코드입니다.

  @RequestMapping("/deleteSupp")
  @ResponseBody
  public Result<String> deleteSupplier(HttpServletRequest request){
    Result<String> rs = new Result<>();
    String supplierId = request.getParameter("supplierId");
    supplierService.deleteSupplierById(supplierId);
    rs.setSuccess(true);
    return rs;
  }

로그인 후 복사

위 내용은 제가 모두를 위해 컴파일한 내용입니다. 앞으로는 모두에게 도움이 되세요.