How jquery implements the Ajax linkage box (ii) _jquery

Another form of the linkage box, the right-hand side of the linkage is generated with jquery

This is modeled on the JS method of the article modified
First look at the page code:

Copy Code code as follows:

<tr id= "Sfqyselect" >
<TD width= class= "T_r prten field_c" > Area:</td>
<TD width= "131" >
<select class= "Building" ></select>
</td>
<TD width= "Ten" ></td>
<TD width= "131" >
<input id= "Choose_floor" class= "Text_k Choose_floor" type= "text" value= "Click to select Floor" >
<input class= "Choose_floor_hidden FL {validate:{required:true}}" Type= "hidden" name= "Geoareaid" value= "" >
<div id= "Floornum" class= ' Floornum ' ></div>
</td>
</tr>

JS for page calls:

Copy Code code as follows:

<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>

The corresponding jquery.building.js files are as follows:

Copy Code code as follows:

/*
Ajax three-level linkage
Date: 2013-2-26
Settings parameter description
-----
Buildingurl: Building Dropdown data Acquisition Url,josn return
Buildingvalue: Default Tower dropdown value
Floorurl: Floor Data acquisition Url,josn return
Floorvalue: Default Floor value
NoData: No data status
Required: Required Options
Clickcallback: The callback function when clicked
------------------------------ */
(function ($) {
$.fn.building=function (Settings) {
if ($ (this). Size () <1) {return;};
Default value
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= ' > Please choose </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;
};
Assignment level two Drop-down box function
var createfloorpanel=function () {
Floor_obj.val (' Click to select Floor ');
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
}
Traverse Assignment Level two Drop-down list
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 () {
Traverse Assignment Level Drop-down list
$.getjson (Settings.buildingurl, {time:new Date (). GetTime ()}, function (Jsonresult) {
if (!jsonresult.success) {
Return
}
Traverse Assignment Level Drop-down list
Building_obj.html (prepareselecthtml (jsonresult.data));
Createfloorpanel ();
If there is a value for the incoming building and floor, select it. (SetTimeout is set for compatible 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);
});
event occurs when you select a level
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");
});
};
Initialize the first Drop-down box
Init ();
};
}) (JQuery);

Background processing requests and returns JSON data:

Copy Code code as follows:

@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 = "Find the building successful." ";
Issuccess=true;
catch (Exception e) {
msg = "Failed to find the building." ";
Log.error ("Find the building failed:" + 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 = "Find floors successful." ";
Issuccess=true;
catch (Exception e) {
msg = "Find floor failed." ";
Log.error ("Find floor failed:" + 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;
}

Get!