仿淘寶篩選模塊功能

仿淘寶篩選模塊總結:


需求:
1、 點擊一個商品後,顯示出該商品的篩選條件(因爲符合此id號的商品有海量數據,要找到自己想要的,就需要給出篩選條件。)
2、 點擊篩選條件後、該篩選條件框會隱藏、顯示出符合該商品的內容、再點擊篩選條件、在隱藏該條件框、最後列出符合篩選條件的數據。
3、 只用這一個頁面來接受和傳遞數據。

要做數據來回傳遞,且只用一個頁面。相當於淘寶買衣服篩選模塊等。

開始做的時候沒有思路。沒有想到用隱藏表單。走了很多彎路。
後來總結的時候想明白些。


1、 隱藏表單(這個很重要 裏面是一些篩選條件的控件 是用來傳遞和接受到值的)。
2、還有一些javaScript(控制div的顯示和隱藏,還有就是幫助隱藏表單提交)
3、body 需要onload事件。用來獲取div是顯示還是隱藏,數據爲空就顯示div,不爲空就隱藏div

4、使用hibernate的時候在dao層的hql語句拼湊要用到where 1=1 


該需求實現流程:

1、通過第一個頁面點擊一個大類別id是衣服(004)的id
跳轉到第二個頁面
2、顯示的是該id=004的所有數據。還有該數據的所有篩選條件。

Jsp裏有from隱藏表單(用來接受和傳遞值)、裏面的控件用來獲取到點擊內容的id
控件的value值是用ongl取到action裏的值 value=${XXXX}  【XXXX是action裏的屬性】


3、Jsp裏有個javaScript方法 負責把自己篩選的id傳遞給隱藏表單的控件裏,並且提交隱藏表單框。
From隱藏表單框的action 也是同一個action 、post方法
比如我點擊了品牌(勁霸男裝id = 00040101)-----action獲取到該隱藏表單的所有控件getter setter 。
在action裏寫個init(初始化) 的方法(用來顯示該id=004的全部信息 、action調用service調用dao)。在execute裏調用init方法

4、執行execute方法 加載了初始化篩選條件 return success 回跳了該頁面,該頁面body加載了onload方法 顯示或隱藏div框


我感覺我描述很流水賬。不多說了 貼代碼。

jsp 前臺頁面(只列舉的id 屬性,name屬性沒用到)

category.jsp

<script type="text/javascript">
			//增加篩選條件
			function addCondition(id, value) {
				//alert(id);
				document.getElementById(id).setAttribute("value", value);
				//alert(value);
				
				document.getElementById("conditionForm").submit();
		
			}
			//移除篩選條件
			function removeCondition(id) {
				
				document.getElementById(id).setAttribute("value", null);
				document.getElementById("conditionForm").submit();
			}
			
			
			//初始化
			function init() {
				var id="${condition.id}";
				var name="${condition.name}";
				
				if(id!=''&& id !=null){
					document.getElementById("pinpai").style.display = 'none';//不顯示
				}else{
					document.getElementById("pinpai").style.display = 'block';//顯示
				}
				
						
			}
			</script>
</head>
<body οnlοad="init()">
<form action="/search.action?id=004"  id="conditionForm">
<input type="hidden" name="condition.id"   id="id" value="${condition.id}">
<input type="hidden" name="condition.name" id="name" value="${condition.name}">
</form>

您已經選擇:

			<s:if test="condition.id!=''">
				<a οnclick="removeCondition('id');">
					${condition.id} </a>
			</s:if>

		


篩選條件:  
<div id="pinpai">
品牌:<a  οnclick="addCondition('id','0040101')">勁霸</a> 
             <br>
             <a  οnclick="addCondition('id','0040102')">阿瑪尼</a>
			 <br>
</div>

...
</body>
</html>

action 類 


SearchAction.java

需要用到pojo類 Condition  裏面有id 和name 屬性  setter getter

public List<Condition> conditions;

setter getter...

execute(){

init();//初始化篩選條件

if(conditions!=null){

//執行篩選語句

//調用service調用dao

}

return SUCCESS;

}


struts.xml就配置result

<action name="search" class="SearchAction" >
          <result> /category.jsp</result>
 </action>




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章