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

リンケージ ボックスの別の形式、右側のリンケージ ボックスは 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("データ", データ);
結果マップを返します;
}

搞定！

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：mouse_javascriptスキルの座標値を取得するjsメソッド次の記事：mouse_javascriptスキルの座標値を取得するjsメソッド

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル