jquery怎樣實現ajax聯動框(二)_jquery

另一種形式的聯動框，右邊的聯動框用jquery產生
 
這是仿照上篇的js方法修改的
先看下頁面代碼：

複製代碼 代碼如下:

<tr id="sfqySelect">
<td width="100" class="t_r prten field_c">事發地區：</td>
<td width="131">
<select class="building"></select>
</td>
<td width="10"></td>
<td width="131">
<input id="choose_floor" class="text_k choose_floor" type="text" value="點擊選擇樓層">
<input class="choose_floor_hidden FL {validate:{required:true}}" type="hidden" name="geoareaid" value="">
<div id="floorNum" class='floorNum'></div>
</td>
</tr>

頁面調用的js：

複製代碼 代碼如下:

<script type="text/javascript" src="${rc.contextPath}/js/jquery.building.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sfqySelect").building({
nodata:"none",
required:true,
buildingUrl:'${rc.contextPath}/repair/loadBuildings',
floorUrl:'${rc.contextPath}/repair/loadFloors',
clickCallback:function(value,text,other){
moveGis(other);
}
});
});
</script>

對應的 jquery.building.js 檔案如下：

複製代碼 代碼如下:

/*
Ajax 三級聯動
日期：2013-2-26
settings 參數說明
-----
buildingUrl:大樓下拉資料擷取URL,josn返回
buildingValue:預設大樓下拉value
floorUrl:樓層資料擷取URL,josn返回
floorValue:預設樓層value
nodata:無資料狀態
required:必選項
clickCallback:點擊時的回呼函數
------------------------------ */
(function($){
$.fn.building=function(settings){
if($(this).size()<1){return;};
// 預設值
settings=$.extend({
buildingUrl:"js/city.min.js",
floorUrl:"js/city.min.js",
buildingValue:null,
floorValue:null,
nodata:null,
required: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) ? "" : "<option value=''>請選擇</option>";
var prepareSelectHtml=function(jsonArray){
var temp_html=select_prehtml;
$.each(jsonArray,function(index,row){
temp_html+="<option value='"+row.value+"'>"+row.text+"</option>";
});
return temp_html;
};
var prepareFloorPanelHtml=function(jsonArray){
var temp_html='<table id="floor_table" cellpadding="0" cellspacing="0">';
var count=0;
$.each(jsonArray,function(index,row){
if(count==0){
temp_html+='<tr>';
}
var otherAttr="";
if(row.other){
otherAttr="other="+row.other+"";
}
temp_html+='<td '+otherAttr+' floorId='+row.value+'>'+row.text+'</td>';
if(count>0&&count%3==0){
temp_html+='</tr>';
count=-1;
}
count=count+1;
});
temp_html+='</table>';
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=="none"){
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);
floorPanel_obj.css("display","none");
settings.clickCallback(value,text,other);
});
/*$('body').filter('.choose_floor').click(function(){
alert(1)
floorPanel_obj.css("display","none");
}); */
});

};

var init=function(){
// 遍曆賦值一級下拉式清單
$.getJSON(settings.buildingUrl, {time: new Date().getTime() }, function(jsonResult){
if(!jsonResult.success){
return;
}
// 遍曆賦值一級下拉式清單
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);
});
// 選擇一級時發生事件
building_obj.bind("change",function(){
createFloorPanel();
});
floor_obj.click(function(){
//show
//alert(floorPanel_obj.html())
//floorPanel_obj.css("height","100px");
//floorPanel_obj.css("width","100px");
//floorPanel_obj.css('floorNum');
floorPanel_obj.css("display","block");
});
};
// 初始化第一個下拉框
init();
};
})(jQuery);

幕後處理請求及返回json資料：

複製代碼 代碼如下:

@RequestMapping("loadBuildings")
@ResponseBody
public Map<String, Object> loadBuildings(ModelMap model){
String msg = "";
boolean isSuccess = false;
List<Map<String, String>> maps=new ArrayList<Map<String,String>>();
try {
List<GeoArea> buildings= geoAreaService.findBuildings();
for (GeoArea building : buildings) {
Map<String,String> map=new HashMap<String, String>();
map.put("value", building.getId().toString());
map.put("text", building.getName());
maps.add(map);
}
msg = "尋找大樓成功。";
isSuccess=true;
} catch (Exception e) {
msg = "尋找大樓失敗。";
log.error("尋找大樓失敗：" + e.getMessage(), e);
}
return buildAjaxResult(isSuccess, msg,maps);
}
@RequestMapping("loadFloors")
@ResponseBody
public Map<String, Object> loadFloors(@RequestParam("buildingId")Integer buildingId,ModelMap model){
String msg = "";
boolean isSuccess = false;
List<Map<String, String>> maps=new ArrayList<Map<String,String>>();
try {
List<GeoArea> floors= geoAreaService.findFloorById(buildingId);
for (GeoArea floor : floors) {
Map<String,String> map=new HashMap<String, String>();
map.put("value", floor.getId().toString());
map.put("text", floor.getName());
map.put("other", floor.getCode());
maps.add(map);
}
msg = "尋找樓層成功。";
isSuccess=true;
} catch (Exception e) {
msg = "尋找樓層失敗。";
log.error("尋找樓層失敗：" + e.getMessage(), e);
}
return buildAjaxResult(isSuccess, msg,maps);
}
protected Map<String, Object> buildAjaxResult(boolean isSuccess, String msg, Object data) {
Map<String, Object> resultMap = new HashMap<String, Object>();
resultMap.put("success", isSuccess);
resultMap.put("msg", msg);
resultMap.put("data", data);
return resultMap;
}

搞定！