jquery가 ajax linkage box를 구현하는 방법 (2)_jquery

링키지 박스의 또 다른 형태인 오른쪽의 링키지 박스는 jquery로 생성한 것입니다

이전 글의 js 메소드를 모방하여 수정한 것입니다
먼저 페이지 코드를 살펴보세요:

코드 복사 코드는 다음과 같습니다.

>사고 지역:




;input id="choose_floor " class="text_k choose_floor" type="text" value="층을 ​​선택하려면 클릭하세요">

;/tr>


페이지에서 호출되는 JS:

코드 복사 코드는 다음과 같습니다. : < ;script type="text/javascript" src="${rc.contextPath}/js/jquery.building.js"> script type="text/javascript">

$(document).ready(function(){

$("#sfqySelect").building({
nodata:"none",
필수:true,
buildingUrl:'$ {rc.contextPath}/repair/loadBuildings',
floorUrl:'${rc.contextPath}/repair/loadFloors',
clickCallback:function(value,text ,other){
moveGis(other) ;
}
})



.js 파일은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

/*
Ajax 3단계 연계
날짜: 2013-2-26
설정 매개변수 설명
------
buildingUrl: 건물 드롭다운 데이터 획득 URL, josn은
buildingValue: 기본 건물 드롭다운 값
floorUrl: 층 데이터 획득 URL, josn은
floorValue: 기본 층 값
nodata: 데이터 상태 없음
을 반환합니다. 필수: 필수: 필수 옵션
clickCallback :클릭 시 콜백 함수
------------------------------- */
(function( $){
$.fn.building=function(settings){
if($(this).size()<1){return;};
// 기본값
설정 =$.extend({
buildingUrl:"js/city.min.js",
floorUrl:"js/city.min.js",
buildingValue:null,
floorValue:null,
nodata:null,
필수:true,
clickCallback:function(){}
},settings)
var box_obj=this
var Building_obj=box_obj.find( ".building ");
var Floor_obj=box_obj.find(".choose_floor");
var FloorHidden_obj=box_obj.find(".choose_floor_hidden")
var FloorPanel_obj=box_obj.find("# FloorNum") ;
var select_prehtml=(settings.required) ? "" : "선택하세요";
var prepareSelectHtml=function(jsonArray){
var temp_html=select_prehtml;
$.each(jsonArray,function(index,row){
temp_html ="" row.text " ";
});
return temp_html;
};
var prepareFloorPanelHtml=function(jsonArray){
var temp_html='';
var count=0;
$.each(jsonArray,function(index,row){
if(count==0){
temp_html =' ';
var otherAttr="";
if(row.other){
otherAttr="other=" row.other ""
}
temp_html =''
if(count>0&&count%3==0){
temp_html ='';
count=-1;
}
count=count 1
})
temp_html ='

' row.text '

';
return temp_html;
};
// 보조 드롭다운 상자 기능 할당
var createFloorPanel=function(){
floor_obj.val('층을 선택하려면 클릭하세요.');
floorHidden_obj.val ('');
//floorPanel_obj.empty();
if(building_obj.val()==''){
return; $.getJSON(settings.floorUrl, { BuildingId: Building_obj.val(), time: new Date().getTime() }, function(jsonResult){
if(!jsonResult.success){
if( settings.nodata=="없음"){
floorPanel_obj.css("display","none")
}else if(settings.nodata=="hidden"){
floorPanel_obj.css( "visibility","hidden");
return;
}
// 할당된 보조 드롭다운 목록 탐색
floorPanel_obj.html(prepareFloorPanelHtml(jsonResult.data)) ;
floorPanel_obj.find( 'td').click(function(){
//hide
var text = $(this).html();
var value = $(this) .attr("floorId");
var other =$(this).attr("other");
floor_obj.val(text)
floorHidden_obj.val(value); .css("display"," none");
settings.clickCallback(value,text,other)
})
/*$('body').filter('.choose_floor' ).click(function(){
alert(1)
floorPanel_obj.css("display","none");
}) */
}); >};

var init=function(){
// 할당 1단계 드롭다운 목록 탐색
$.getJSON(settings.buildingUrl, {time: new Date(). getTime() }, function(jsonResult){
if(!jsonResult.success){
return;
}
// 할당 1레벨 드롭다운 목록
building_obj을 탐색합니다. html(prepareSelectHtml(jsonResult.data));
createFloorPanel() ;
// 건물과 층의 값이 전달되면 선택합니다. (setTimeout은 IE6과의 호환성을 위해 설정됩니다.)
setTimeout(function(){
if(settings.buildingValue && settings.buildingValue.length>0){
building_obj.val(settings.buildingValue);
createFloorPanel();
setTimeout(function(){
if(settings.floorValue!=null){
floor_obj.val(settings.floorValue);
};
},1 ) ;
};
},1);
}// 레벨 1을 선택하면 이벤트가 발생합니다.
building_obj.bind("change",function(){
createFloorPanel ();
});
floor_obj.click(function(){
//show
//alert(floorPanel_obj.html())
//floorPanel_obj.css( "높이","100px");
//floorPanel_obj.css("너비","100px")
//floorPanel_obj.css('floorNum')
floorPanel_obj.css("display ", "block");
});
};
//첫 번째 드롭다운 상자 초기화
init();
};
})(jQuery) ;


백그라운드 처리 요청 및 json 데이터 반환:




코드 복사

코드는 다음과 같습니다.

@RequestMapping("loadBuildings")
@ResponseBody
공개 맵 loadBuildings(ModelMap 모델){
String msg = "";
부울 isSuccess = false;
목록> map=new ArrayList>();
{
목록 건물= geoAreaService.findBuildings();
for (GeoArea 건물 : 건물) {
Map map=new HashMap();
map.put("value", Building.getId().toString());
map.put("text", Building.getName());
maps.add(지도);
}
msg = "查找大楼成功。";
isSuccess=true;
} catch(예외 e) {
msg = "查找大楼失败。";
log.error("查找大楼失败：" e.getMessage(), e);
}
return buildAjaxResult(isSuccess, msg,maps);
}
@RequestMapping("loadFloors")
@ResponseBody
공개 맵 loadFloors(@RequestParam("buildingId")Integer BuildingId,ModelMap 모델){
String msg = "";
부울 isSuccess = false;
목록> map=new ArrayList>();
{
목록 층= geoAreaService.findFloorById(buildingId);
for (GeoArea 층 : 층) {
Map map=new HashMap();
map.put("value", Floor.getId().toString());
map.put("text", Floor.getName());
map.put("기타", Floor.getCode());
maps.add(지도);
}
msg = "查找楼层成功。";
isSuccess=true;
} catch(예외 e) {
msg = "查找楼层失败。";
log.error("查找楼层失败：" e.getMessage(), e);
}
return buildAjaxResult(isSuccess, msg,maps);
}
보호된 Map buildAjaxResult(boolean isSuccess, String msg, Object data) {
Map resultMap = new HashMap();
resultMap.put("성공", isSuccess);
resultMap.put("msg", msg);
resultMap.put("데이터", 데이터);
결과맵 반환;
}

결정!