JSTL動態載入單選框--【ssnc】

ZeroWM發表於2015-12-24

親愛的部長大人又提新需求了，希望我們能做出動態載入單選按鈕的彈出框，方便後期維護。如下圖所示，新增一個菜品的時候，需要定義辣的梯度：不辣，微辣，麻辣，如果後期需要新增什麼變態辣啊，超辣之類的，還要去改動頁面上的多處程式碼，後期維護起來會煩人啦。所以對這個辣做活，進行抽象和封裝，給程式設計人員減負啊，丫的，這才是真正的懶人~

　　首先，我查閱了一些資料。大致解決方案如下：

第一種，特別復古特別原始的方法，類似Servlet的原理，在controller裡面拼接彈出框，然後return回前臺，因為要做整個頁面，小主比較懶，就給pass了。.net的可以參考一下王雅瑾師姐的部落格投訴舉報專案中動態載入單選框、核取方塊，寫的特好。

第二種，就是通過Ajax在前臺拼接表單，然後返回，可以參考這個部落格ajax動態載入下拉框、單選框、核取方塊，感覺還是很複雜，也pass掉了。

第三種，採用SpringMVC的標籤，form標籤，能實現載入出多個單選框，但是樣式不一致，也給pass掉了。

核心程式碼如下：

Action:

<span style="font-size:14px;">       /**
	 * 新增辣度梯度彈出框  王美  2015年12月22日16:49:24
	 * @return 
	 */
	@RequestMapping(value="/addDishInfo.do",method=RequestMethod.GET)
	public String testAudio(Map<String, Object> map){
			Spcity spcity = new Spcity();  
			   spcity.setFavoriteBall("1");//設定預設辣度  
			   Map<Integer, String> ballMap = new HashMap<Integer, String>();  
			   ballMap.put(1, "不辣");  
			   ballMap.put(0, "微辣");  
			   ballMap.put(2, "麻辣");  			    
			   map.put("spcity", spcity);  
			   map.put("ballMap", ballMap); 
		return "ssnc/ncgl/caipin-add";
	}
</span>

SpringMVC:

<span style="font-size:14px;"><form:form action="ssnc/ncgl/addDishInfo.do" method="post" commandName="spcity">  
			<div class="f_label">辣度:</div>
		          
			<form:radiobuttons name="spicy"  path="favoriteBall" items="${ballMap}" delimiter=" "/>  
		     

 </form:form></span>

實體：

<span style="font-size:14px;">       package com.snsoft.ssnc.ncgl.action;
	
	/**
	 *菜品-- 辣度實體 王美  2015年12月24日09:31:25
	 * @author wm
	 *
	 */
	public class Spcity {
		
		private String id;
		private String FavoriteBall;
	    
	
		public String getId(){
	         return this.id;
	    }
	    public void setId(String id){
	         this.id = id;
	    }
		public String getFavoriteBall() {
			return FavoriteBall;
		}
		public void setFavoriteBall(String favoriteBall) {
			FavoriteBall = favoriteBall;
		}
	    
	  
	

}</span>

第四種，(*@ο@*) 哇～終於等到你~還好我沒放棄~採用JSTL表示式，完美實現，之前網上商城的專案有用過哦，現在是溫習的時候啦。

編輯JSP:

<span style="font-size:14px;"><div class="formitem">
		<div class="f_label">辣度:</div>
			<div class="f_item">	
				
			<c:forEach items="${list}" var="m" >						
			<input type="radio" id="spicy${m.key }" name="spicy" value="${m.key }" <c:if test="${dishInfo.spicy ==m.key}">checked="checked"</c:if>/><label for="ld${m.key }" class="label">${m.val }</label>			
		</c:forEach>	
					
</div>
</span>

編輯action:

<span style="font-size:14px;">               /**
		 * 開啟菜品編輯頁面  王美 2015年12月20日
		 * @param modelMap 用於儲存待顯示資料
		 * @param roleuuid 菜品ID
		 * @return
		 */
		@RequestMapping(value="/editDishInfo.do", method=RequestMethod.GET)
		@SuppressWarnings("all")
		public String edit(ModelMap modelMap,ModelMap map, String dishuuid){
			
			spicy spcity = new spicy();  
			   List<Object> list = new ArrayList<Object>();
			   Map<String, String> map2 = new HashMap<String, String>();
			   map2.put("key", "1");
			   map2.put("val", "不辣");
			   list.add(map2);
			   
			   map2 = new HashMap<String, String>();
			   map2.put("key", "0");
			   map2.put("val", "微辣");
			   list.add(map2);
			   
			   map2 = new HashMap<String, String>();
			   map2.put("key", "2");
			   map2.put("val", "麻辣");
			   list.add(map2);
			   map.put("list", list);		    
			   map.put("spcity", spcity);  
			
			
			//獲取菜品的持久化物件	
			SnDishInfo dishInfo = dishInfoService.get(dishuuid);
			//把使用的資料實體放入ModelMap中
			modelMap.put("dishInfo", dishInfo);
			
			//返回caipin-edit頁面
			return "ssnc/ncgl/caipin-edit";
		}
		
</span>

新增jsp:

<span style="font-size:14px;">              <div class="formitem">
			<div class="f_label">辣度:</div>
			<div class="f_item">
			<c:forEach items="${list}" var="m">
				<c:if test="${m.key==1 }" >
						<input type="radio" id="spicy${m.key }" name="spicy" value="${m.key }" checked="checked" /><label for="ld${m.key }" class="label">${m.val }</label>
				</c:if>
				<c:if test="${m.key!=1 }">
				<input type="radio" id="spicy${m.key }" name="spicy" value="${m.key }"  /><label for="ld${m.key }" class="label">${m.val }</label>
				</c:if>
			</c:forEach>			
		</div>
</span>

新增Action:

<span style="font-size:14px;">                       /**
			 * 新增菜品彈出框
			 * @return 新增菜品jsp
			 */
			@RequestMapping(value="/addDishInfo.do",method=RequestMethod.GET)
			public String addDishInfo(ModelMap map){
				spicy spcity = new spicy();  
				   List<Object> list = new ArrayList<Object>();
				   Map<String, String> map2 = new HashMap<String, String>();
				   map2.put("key", "1");
				   map2.put("val", "不辣");
				   list.add(map2);
				   
				   map2 = new HashMap<String, String>();
				   map2.put("key", "0");
				   map2.put("val", "微辣");
				   list.add(map2);
				   
				   map2 = new HashMap<String, String>();
				   map2.put("key", "2");
				   map2.put("val", "麻辣");
				   list.add(map2);
				   map.put("list", list);		    
				   map.put("spcity", spcity);  
				return "ssnc/ncgl/caipin-add";

}</span>

實體：

<span style="font-size:14px;">		package com.snsoft.ssnc.ncgl.entity;
		/**
		 *菜品-- 辣度實體 王美  2015年12月24日09:31:25
		 * @author wm
		 *
		 */
		public class SnSpicy {
			
			private String id;
			private String Favorite;
		    
		
			public String getId(){
		         return this.id;
		    }
		    public void setId(String id){
		         this.id = id;
		    }
			public String getFavorite() {
				return Favorite;
			}
			public void setFavoriteBall(String favorite) {
				Favorite = favorite;
			}
		}
		    
</span>

第五種，寫一個靜態的辣度類：

package com.snsoft.framework.core;

import java.util.ArrayList;
import java.util.Collections;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

/**
 * 辣度類
 * @author wm
 *
 */
public class Spicy {
	
	
	public static final List<Map<String, String>> SPICY_LIST= new ArrayList<Map<String, String>>();
	static{
		
		Map<String, String> map2 = new HashMap<String, String>();
		   map2.put("key", "1");
		   map2.put("val", "不辣");
		   SPICY_LIST.add(map2);
		   
		   map2 = new HashMap<String, String>();
		   map2.put("key", "0");
		   map2.put("val", "微辣");
		   SPICY_LIST.add(map2);
		   
		   map2 = new HashMap<String, String>();
		   map2.put("key", "2");
		   map2.put("val", "麻辣");
		   SPICY_LIST.add(map2);
		   
	/*	   map2 = new HashMap<String, String>();
		   map2.put("key", "3");
		   map2.put("val", "變態辣");
		   SPICY_LIST.add(map2);*/
	}
	
}

新增菜品彈出框：

	/**
	 * 新增菜品彈出框
	 * @return 新增菜品jsp
	 */
	@RequestMapping(value="/addDishInfo.do",method=RequestMethod.GET)
	public String addDishInfo(ModelMap map){
				   
		   Spicy spicy=new Spicy();	//例項化辣度類	  
		   map.put("list", spicy.SPICY_LIST);//spicy.SPICY_LIST是辣度的梯度-靜態屬性    
	 
		return "ssnc/caipin/caipin-add";
	}

編輯菜品彈出框：

/**
	 * 開啟菜品編輯頁面  王美 2015年12月20日
	 * @param modelMap 用於儲存待顯示資料
	 * @param roleuuid 菜品ID
	 * @return
	 */
	@RequestMapping(value="/editDishInfo.do", method=RequestMethod.GET)
	@SuppressWarnings("all")
	public String edit(ModelMap modelMap,ModelMap map, String dishuuid){
				
		Spicy spicy=new Spicy();	//例項化辣度類	  
		map.put("list", spicy.SPICY_LIST);//spicy.SPICY_LIST是辣度的梯度-靜態屬性    
		
		//獲取菜品的持久化物件	
		SnDishInfo dishInfo = dishInfoService.get(dishuuid);
		if(dishInfo==null){
			modelMap.put("errormessage", "引數異常");
			return "framework/error/error";
		}
		//把使用的資料實體放入ModelMap中
		modelMap.put("dishInfo", dishInfo);
		
		//返回caipin-edit頁面
		return "ssnc/caipin/caipin-edit";
	}

辣度新增jsp:

<div class="formitem">
		<div class="f_label">辣度:</div>
		<div class="f_item">
		<c:forEach items="${list}" var="m">
			<c:if test="${m.key==1 }" >
					<input type="radio" id="spicy${m.key }" name="spicy" value="${m.key }" checked="checked" /><label for="ld${m.key }" class="label">${m.val }</label>
			</c:if>
			<c:if test="${m.key!=1 }">
			<input type="radio" id="spicy${m.key }" name="spicy" value="${m.key }"  /><label for="ld${m.key }" class="label">${m.val }</label>
			</c:if>
		</c:forEach>			
	</div>

辣度修改jsp:

	<div class="formitem">
		<div class="f_label">辣度:</div>
		<div class="f_item">	
		
		<c:forEach items="${list}" var="m" >						
			<input type="radio" id="spicy${m.key }" name="spicy" value="${m.key }" <c:if test="${dishInfo.spicy ==m.key}">checked="checked"</c:if>/><label for="ld${m.key }" class="label">${m.val }</label>			
		</c:forEach>	
			
	</div>

用祖藍和金星奶奶的兩個字，就是完美~

最後，點點滴滴的積累，發現自己正在從小菜到大菜的轉型中，happy everyday~~

jQuery 動態載入下拉框選項（Django）
2018-12-20
jQueryDjango
Vue的動態選單無法登入（無法載入選單）
2024-05-05
Vue
vue 動態載入路由，渲染左側選單欄
2024-10-15
Vue路由
vue 動態選單以及動態路由載入、重新整理採的坑
2021-10-15
Vue路由
動態獲取一級分類下拉框，根據所選一級分類id動態載入二級分類載入至下拉框
2018-09-04
EasyUI Jquery 動態載入樹，點選節點載入
2014-05-06
UIjQuery
【BootStrap】--登入載入模態框提示
2015-09-14
boot
php短視訊原始碼，vue遞迴動態載入選單
2022-05-13
PHP原始碼Vue遞迴
下拉選單框和滾動條
2018-09-07
動態建立選單
2015-06-29
ElementUI級聯選擇器動態載入Demo
2020-10-20
UI
DLL動態庫動態載入
2024-08-28
將選中的下拉選單值寫入文字框
2017-04-14
cad動態輸入框不見了 cad動態輸入框怎麼調出來
2022-04-18
動態載入js檔案簡單介紹
2017-04-11
JS
jQuery動態載入js檔案簡單介紹
2017-03-15
jQueryJS
js動態載入js檔案簡單介紹
2017-03-23
JS
React Router、And、Redux動態選單和動態路由
2024-05-05
ReactRedux路由
Flutter學習(8)——CheckBox多選框使用及動態更改多選框資料
2021-08-10
Flutter
圓形可滑動選單（可以動態新增選單項）
2012-12-07
jQuery操作單選框、多選框是否選中問題
2018-01-31
jQuery
vue 動態載入元件
2019-03-14
Vue元件
Java動態載入類
2018-03-03
Java
BootStrap的動態模態框及靜態模態框
2018-08-13
boot
CSS 動態導航選單
2020-02-19
CSS
Flutter 自定義輸入框Selection選單和選擇器
2019-08-05
Flutter
使用 ATX 判斷單選框選中狀態、開關狀態、圖示型別
2020-12-21
型別
Ajax 應用模板(動態載入列表框)
2009-10-13
簡單實現Crystal Report的動態載入 (轉)
2007-11-13
透過單選按鈕控制編輯框的狀態
2007-03-16
使用Jquery和Ajax的動態依賴選擇框
2019-06-25
jQuery
動態監聽輸入框值的變化
2019-02-16
動態載入UserControl
2021-09-09
OrchardCore 如何動態載入模組？
2021-04-17
使用dlopen載入動態庫
2021-02-28
ListView動態載入資料
2018-11-28
View
QLibrary 載入動態庫
2021-01-18
vue 動態載入組建
2017-04-10
Vue

JSTL動態載入單選框--【ssnc】

相關文章