jquery怎樣實(shí)現(xiàn)ajax聯(lián)動(dòng)框(二)
更新時(shí)間：2013年03月08日 12:07:42 作者：
ajax聯(lián)動(dòng)框想必大家早有所耳聞，接下來(lái)將介紹jquery實(shí)現(xiàn)另一種形式的聯(lián)動(dòng)框，右邊的聯(lián)動(dòng)框用jquery生成，仿照上篇的js方法修改的，感興趣的你可以參考下希望可以幫助到你
另一種形式的聯(lián)動(dòng)框，右邊的聯(lián)動(dòng)框用jquery生成
這是仿照上篇的js方法修改的
先看下頁(yè)面代碼：
<tr id="sfqySelect">
<td width="100" class="t_r prten field_c">事發(fā)區(qū)域：</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="點(diǎn)擊選擇樓層">
<input class="choose_floor_hidden FL {validate:{required:true}}" type="hidden" name="geoareaid" value="">
<div id="floorNum" class='floorNum'></div>
</td>
</tr>
頁(yè)面調(diào)用的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>
對(duì)應(yīng)的 jquery.building.js 文件如下：
/*
Ajax 三級(jí)聯(lián)動(dòng)
日期：2013-2-26
settings 參數(shù)說(shuō)明
-----
buildingUrl:大樓下拉數(shù)據(jù)獲取URL,josn返回
buildingValue:默認(rèn)大樓下拉value
floorUrl:樓層數(shù)據(jù)獲取URL,josn返回
floorValue:默認(rèn)樓層value
nodata:無(wú)數(shù)據(jù)狀態(tài)
required:必選項(xiàng)
clickCallback:點(diǎn)擊時(shí)的回調(diào)函數(shù)
------------------------------ */
(function($){
$.fn.building=function(settings){
if($(this).size()<1){return;};
// 默認(rèn)值
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=''>請(qǐng)選擇</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;
};
// 賦值二級(jí)下拉框函數(shù)
var createFloorPanel=function(){
floor_obj.val('點(diǎn)擊選擇樓層');
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;
}
// 遍歷賦值二級(jí)下拉列表
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(){
// 遍歷賦值一級(jí)下拉列表
$.getJSON(settings.buildingUrl, {time: new Date().getTime() }, function(jsonResult){
if(!jsonResult.success){
return;
}
// 遍歷賦值一級(jí)下拉列表
building_obj.html(prepareSelectHtml(jsonResult.data));
createFloorPanel();
// 若有傳入大樓與樓層的值，則選中。（setTimeout為兼容IE6而設(shè)置）
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);
});
// 選擇一級(jí)時(shí)發(fā)生事件
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");
});
};
// 初始化第一個(gè)下拉框
init();
};
})(jQuery);
后臺(tái)處理請(qǐng)求及返回json數(shù)據(jù)：
@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;
}
搞定！
這是仿照上篇的js方法修改的
先看下頁(yè)面代碼：
復(fù)制代碼 代碼如下:
<tr id="sfqySelect">
<td width="100" class="t_r prten field_c">事發(fā)區(qū)域：</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="點(diǎn)擊選擇樓層">
<input class="choose_floor_hidden FL {validate:{required:true}}" type="hidden" name="geoareaid" value="">
<div id="floorNum" class='floorNum'></div>
</td>
</tr>
頁(yè)面調(diào)用的js：
復(fù)制代碼 代碼如下:
<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>
對(duì)應(yīng)的 jquery.building.js 文件如下：
復(fù)制代碼 代碼如下:
/*
Ajax 三級(jí)聯(lián)動(dòng)
日期：2013-2-26
settings 參數(shù)說(shuō)明
-----
buildingUrl:大樓下拉數(shù)據(jù)獲取URL,josn返回
buildingValue:默認(rèn)大樓下拉value
floorUrl:樓層數(shù)據(jù)獲取URL,josn返回
floorValue:默認(rèn)樓層value
nodata:無(wú)數(shù)據(jù)狀態(tài)
required:必選項(xiàng)
clickCallback:點(diǎn)擊時(shí)的回調(diào)函數(shù)
------------------------------ */
(function($){
$.fn.building=function(settings){
if($(this).size()<1){return;};
// 默認(rèn)值
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=''>請(qǐng)選擇</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;
};
// 賦值二級(jí)下拉框函數(shù)
var createFloorPanel=function(){
floor_obj.val('點(diǎn)擊選擇樓層');
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;
}
// 遍歷賦值二級(jí)下拉列表
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(){
// 遍歷賦值一級(jí)下拉列表
$.getJSON(settings.buildingUrl, {time: new Date().getTime() }, function(jsonResult){
if(!jsonResult.success){
return;
}
// 遍歷賦值一級(jí)下拉列表
building_obj.html(prepareSelectHtml(jsonResult.data));
createFloorPanel();
// 若有傳入大樓與樓層的值，則選中。（setTimeout為兼容IE6而設(shè)置）
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);
});
// 選擇一級(jí)時(shí)發(fā)生事件
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");
});
};
// 初始化第一個(gè)下拉框
init();
};
})(jQuery);
后臺(tái)處理請(qǐng)求及返回json數(shù)據(jù)：
復(fù)制代碼 代碼如下:
@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;
}
搞定！
您可能感興趣的文章:
- 幾種二級(jí)聯(lián)動(dòng)案例（jQuery\Array\Ajax php）
- jQuery+JSON實(shí)現(xiàn)AJAX二級(jí)聯(lián)動(dòng)實(shí)例分析
- jquery ajax實(shí)現(xiàn)下拉框三級(jí)無(wú)刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)
- ajax.net +jquery 無(wú)刷新三級(jí)聯(lián)動(dòng)的實(shí)例代碼
- jquery怎樣實(shí)現(xiàn)ajax聯(lián)動(dòng)框(一)
- asp.net省市三級(jí)聯(lián)動(dòng)的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- JQuery的Ajax請(qǐng)求實(shí)現(xiàn)局部刷新的簡(jiǎn)單實(shí)例
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- Jquery中ajax方法data參數(shù)的用法小結(jié)
- 用jQuery中的ajax分頁(yè)實(shí)現(xiàn)代碼
- jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果簡(jiǎn)單示例
相關(guān)文章
這篇文章主要介紹了jQuery表單域?qū)傩赃^(guò)濾器用法,實(shí)例分析了:checked、:enabled、:disabled:、selected等常用表單域?qū)傩赃^(guò)濾器使用技巧,需要的朋友可以參考下2015-02-02
jQuery實(shí)現(xiàn)的form轉(zhuǎn)json經(jīng)典示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的form轉(zhuǎn)json功能,結(jié)合完整實(shí)例形式分析了jQuery將form表單數(shù)據(jù)封裝成json傳輸?shù)木唧w步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
深入理解bootstrap框架之入門(mén)準(zhǔn)備
Bootstrap是最流行的前端開(kāi)發(fā)框架。本文涉及到bootstrap的特性介紹，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-10-10
Jquery綁定事件(bind和live的區(qū)別介紹)
Jquery中綁定事件有三種方法click、bind、live第一種方法很好理解，其實(shí)就和普通JS的用法差不多，只是少了一個(gè)on而已第二、三種方法都是綁定事件2013-08-08
最近在做一個(gè)項(xiàng)目，需要一個(gè)在線視頻播放的功能，在度娘上找了許多都不是太理想，就動(dòng)手寫(xiě)了一個(gè)，分享給大家2014-10-10
這篇文章主要介紹了jquery解決客戶端跨域訪問(wèn)問(wèn)題,jQuery.ajax()支持get方式的跨域，這其實(shí)是采用jsonp的方式來(lái)完成的，需要的朋友可以參考下2015-01-01
jQuery操作動(dòng)態(tài)生成的內(nèi)容的方法
這篇文章主要介紹了jQuery操作動(dòng)態(tài)生成的內(nèi)容的方法,對(duì)比分析了bind與live方法,說(shuō)明了live方法在處理新增元素時(shí)的作用,需要的朋友可以參考下2016-05-05
Jquery網(wǎng)頁(yè)內(nèi)滑動(dòng)緩沖導(dǎo)航的實(shí)現(xiàn)代碼
這篇文章主要介紹了Jquery網(wǎng)頁(yè)內(nèi)滑動(dòng)緩沖導(dǎo)航的實(shí)現(xiàn)代碼,實(shí)現(xiàn)滑動(dòng)緩沖的方式實(shí)現(xiàn)頁(yè)內(nèi)導(dǎo)航，用戶體驗(yàn)大大提升需要的朋友可以參考下2015-04-04
input file樣式修改以及圖片預(yù)覽刪除功能詳細(xì)概括（推薦）
這篇文章主要介紹了input file樣式修改以及圖片預(yù)覽刪除功能，input file 按鈕改成自己想要的樣式以及.圖片預(yù)覽功能的實(shí)現(xiàn)，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
2008-01-01