드롭다운 메뉴에 대한 계단식 작업
- 亚连원래의
- 2018-05-23 14:38:211739검색
이 글에서는 주로 드롭다운 메뉴의 계단식 작업을 자세히 소개하고, 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 ='<option value="6801">--请选择--</option>';
for(x in codeCates){
str+='<option value="'+codeCates[x]+'">'+codeCates[x]+'</option>';
}
$("#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+='<option value="'+codeCates[x]+'">'+codeCates[x]+'</option>';
}
$("#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
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('('+data+')');
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;
}
위 내용은 제가 모두를 위해 컴파일한 내용입니다. 앞으로는 모두에게 도움이 되세요.
관련 기사:
AJAX 디스플레이 로딩 및 팝업 레이어 폐색 페이지 구현 예
Ajax 제출 양식 양식 페이지는 여전히 문제를 빠르게 새로 고칩니다.
ajax 매개변수에 대한 빠른 솔루션이 너무 깁니다. 성공적인 질문을 제출할 수 없습니다
위 내용은 드롭다운 메뉴에 대한 계단식 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!