仿淘宝筛选模块功能

仿淘宝筛选模块总结:


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




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