需求:
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>