欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-05 20:01:47
另一种形式的联动框,右边的联动框用jquery生成 这是仿照上篇的js方法修改的 先看下页面代码: . 代码如下: &l...

另一种形式的联动框,右边的联动框用jquery生成
jquery怎样实现ajax联动框(二)
这是仿照上篇的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;
}