jquery怎样实现ajax联动框(二)

另一种形式的联动框，右边的联动框用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="">
<p id="floornum" class='floornum'></p>
</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;
}