jquery が ajax リンケージボックスを実装する方法 (2)

jquery が ajax リンケージボックスを実装する方法 (2)_jquery

WBOY

リリース： 2016-05-16 17:40:43

オリジナル

871 人が閲覧しました

リンケージボックスの別の形式、右側のリンケージボックスは jquery で生成されています
jquery が ajax リンケージボックスを実装する方法 (2)_jquery
これは前の記事の js メソッドを真似て修正されています
まずはページコードを見てください:

コードをコピーしますコードは次のとおりです。

>インシデントエリア:

;input id="choose_floor " class="text_kchoose_floor" type="text" value="クリックしてフロアを選択">

;/tr>

ページによって呼び出される JS:

コードをコピー

コードは次のとおりです: 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) ; 
} 
}); 

 
 対応する jquery.building .js ファイルは次のとおりです: 

 


コードをコピーします

コードは次のとおりです:

 
/* 
Ajax 3 レベル連携
日付: 2013-2-26 
設定パラメーターの説明
----- 
buildingUrl: ドロップダウン データの構築取得 URL、josn が返す 
buildingValue: デフォルトの建物ドロップダウン値 
floorUrl: フロア データ取得 URL、josn が返す 
floorValue: デフォルトのフロア値 
nodata: データなし 
required: 必須オプション 
clickCallback :クリック時のコールバック関数
---------------------------- */ 
(function( $){ 
$.fn.building=function(settings){ 
if($(this).size()// デフォルト値
設定=$.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; 
varbuilding_obj=box_obj.find( ".building "); 
var Floor_obj=box_obj.find(".choose_floor"); 
var FloorHidden_​​obj=box_obj.find(".choose_floor_hidden"); FloorNum") ; 
var select_prehtml=(settings.required) ? "" : "選択してください"; 
var prepareSelectHtml=function(jsonArray){ 
var temp_html=select_prehtml; 
$.each(jsonArray,function(index,row){ 
temp_html ="" row.text " "; 
}); 
return temp_html; 
}; 
var prepareFloorPanelHtml=function(jsonArray){ 
var temp_html=''; 
var count=0; 
$.each(jsonArray,function(index,row){ 
if(count==0){ 
temp_html =' '; 
var otherAttr="" 
if(row.other){ 
other="row.other ""; 
temp_html ='' 
if(count>0&&count%3==0){ 
temp_html =''; 
count=-1; 
count=count 1; 
temp_html ='' row.text '
'; 
return temp_html; 
// 2 番目のドロップダウン ボックス関数を割り当てます。 
var createFloorPanel=function(){ 
floor_obj.val('クリックして床を選択します'); 
floorHidden_​​obj.val (''); 
//floorPanel_obj.empty(); 
if(building_obj.val()==''){ 
} 
 $.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; 
} 
// 割り当てられた 2 番目のドロップダウン リストを移動します
floorPanel_obj.html(prepareFloorPanelHtml(jsonResult.data)) ; 
floorPanel_obj.find( 'td').click(function(){ 
//隠す 
var text = $(this).html(); 
var value = $(this) .attr("floorId"); 
var other =$(this).attr("other"); 
floorHidden_​​obj.val(value); .css("表示"," なし"); 
settings.clickCallback(value,text,other) 
/*$('body').filter('.choose_floor') ).click(function(){ 
alert(1) 
floorPanel_obj.css("display","none"); 
}) */ 
<🎜); >}; 

var init=function(){ 
// 割り当ての 1 レベルのドロップダウン リストを移動します
$.getJSON(settings.buildingUrl, {time: new Date(). getTime() }, function(jsonResult){ 
if(!jsonResult.success){ 
return; 
} 
// 割り当ての 1 レベルのドロップダウン リスト
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); 
// レベル 1 が選択されるとイベントが発生します 
building_obj.bind("change",function(){ >createFloorPanel (); 
}); 
floor_obj.click(function(){ 
//show 
//alert(floorPanel_obj.html()) 
//floorPanel_obj.css( "高さ ","100px"); 
//floorPanel_obj.css("幅","100px"); 
//floorPanel_obj.css("表示) ", "block"); 
}); 
}; 
//最初のドロップダウン ボックスを初期化します
init(); 
}; 
})(jQuery) ; 


バックグラウンド処理リクエストと戻り json データ: 




コードをコピー


 コードは次のとおりです。 
 
@RequestMapping("loadBuildings") 
@ResponseBody 
public Map loadBuildings(ModelMap モデル){ 
String msg = ""; 
ブール値 isSuccess = false; 
リスト<マップ<文字列, 文字列>>マップ = 新しい ArrayList>(); 
試してください { 
リスト<地理エリア>建物= geoAreaService.findBuildings(); 
for (GeoArea 建物 : 建物) { 
Map map=new HashMap(); 
map.put("値",building.getId().toString()); 
map.put("テキスト",building.getName()); 
maps.add(マップ); 
} 
msg = "查找大楼成功。"; 
isSuccess=true; 
} catch (Exception e) { 
msg = "查找大楼失败。"; 
log.error("查找大楼失败：" e.getMessage(), e); 
} 
return buildAjaxResult(isSuccess, msg,maps); 
} 
@RequestMapping("loadFloors") 
@ResponseBody 
public Map loadFloors(@RequestParam("buildingId")IntegerbuildingId,ModelMap モデル){ 
String msg = ""; 
ブール値 isSuccess = false; 
リスト>マップ = 新しい ArrayList>(); 
試してください { 
リスト<地理エリア>フロア = geoAreaService.findFloorById(建物 ID); 
for (GeoArea フロア : フロア) { 
Map map=new HashMap(); 
map.put("値", Floor.getId().toString()); 
map.put("テキスト", Floor.getName()); 
map.put("その他", Floor.getCode()); 
maps.add(マップ); 
} 
msg = "查找楼层成功。"; 
isSuccess=true; 
} catch (例外 e) { 
msg = "查找楼层失。"; 
log.error("查找楼层失败：" e.getMessage(), e); 
} 
return buildAjaxResult(isSuccess, msg,maps); 
} 
保護されたマップ buildAjaxResult(boolean isSuccess, String msg, Object data) { 
Map resultMap = 新しい HashMap(); 
resultMap.put("成功", isSuccess); 
resultMap.put("msg", msg); 
resultMap.put("データ", データ); 
結果マップを返します; 
} 


搞定！