需求:
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 onload="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 onclick="removeCondition('id');">
${condition.id} </a>
</s:if>
筛选条件:
<div id="pinpai">
品牌:<a onclick="addCondition('id','0040101')">劲霸</a>
<br>
<a onclick="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>