多条件查询 仿淘宝URL传参方式

---恢复内容开始---

最近项目在做一个电商网站，网站涉及到前后台交互的多条件查询，类似于淘宝的多条件查询，图片如下

此类查询主要涉及到的问题有：

1.如何记忆查询参数

2.如何前后台传值

3.中文处理

。

解答：

1：通过从后台返回之前查询参数（网上有在session中记忆参数，也有用数组记忆，这里我选用了淘宝的方式：url返回参数记忆）

2：通过url方式传值，并且需要注意拼接格式

3：前台进行utf8编码，后台进行utf8解码（特别注意：之前记忆的参数通过后台再返回前台，一定要对参数进行解码在编码后进行返回，否则会出现乱码，不过也有可能是我代码的问题）

详细代码如下：

一、前台查询框展示代码：（查询条件都是从后台拉取的集合）

 <div class = "category">
               <div>
               <c:if test="${param.name ne null }">${param.name }</c:if>
          <a ><c:if test="${requestScope.content eq '' or requestScope.content eq null }"><h3>
                    全部商品 - 商品筛选</h3></c:if>
          <c:if test="${requestScope.content ne '' and requestScope.content ne null }">
          <h3>
                   ${requestScope.content } - 商品筛选</h3></c:if></a>
               </div>
              <!--  <dl style=" border-color: #E2E2E2; border-image: none; border-width: 0 1px 1px;width: 900px;padding-left: 10px; padding: 10px;" id="manyC" class="manyC"> -->
            <ul class="select">
			<li class="select-list">
               <c:forEach items="${typePropertys }" var="pro" varStatus="stat" begin="0" end="20">
               <dl id="select${stat.index+1}">
               <dt style="float:left;">${pro.propertyName }：</dt>
               <dd class="select-all selected">
               <a href="javascript:void(0);" onclick="quanbu(${stat.index})">全部</a></dd>
               <c:forEach items="${fn:split(pro.content,\",\") }" var="proName" varStatus="stat2">
               <dd>
               <a id="${stat.index}${stat2.index}" href="javascript:void(0);" onclick="bb(${stat.index},${stat2.index},'${proName }')">${proName }</a>
               </dd>
               </c:forEach>
                </dl>
               </c:forEach>
              </li>
              </ul>
              <%--通过记忆的property来刷新页面时显示之前已筛选的property --%>
              <script type="text/javascript">
              	var propertystring  = '<%=request.getAttribute("property")%>';
              	<%--","拆分字符串，一级拆分 --%>
              	var arg1 = propertystring.split(",");
              	for(var i=0 ; i<arg1.length ; i++){
              		<%--":"拆分字符串，二级拆分 --%>
         		   var arg2 = arg1[i].split(":")[0];
         		  $("#"+arg2).parent().addClass("selected").siblings().removeClass("selected");
         		   }
               </script>
               </div>

二、涉及到的JS方法（重点）

显示之前记忆的查询条件

 <script type="text/javascript">
              	var propertystring  = '<%=request.getAttribute("property")%>';
              	<%--","拆分字符串，一级拆分 --%>
              	var arg1 = propertystring.split(",");
              	for(var i=0 ; i<arg1.length ; i++){
              		<%--":"拆分字符串，二级拆分 --%>
         		   var arg2 = arg1[i].split(":")[0];
         		  $("#"+arg2).parent().addClass("selected").siblings().removeClass("selected");
         		   }
               </script> 

点击新的查询条件事件

<script type="text/javascript">
   function bb(num,con,proname){
	   proname = encodeURI(proname);
	   proname = encodeURI(proname);
	   var propertystring  = '<%=request.getAttribute("property")%>';
	   var newstring = "";
	   var notnullstring = "";
	   var flag = 0;
	   if(propertystring != "null" && propertystring != ""){
	   var arg1 = propertystring.split(",");
	   <%-- 当选择同行时，进行修改，当选择不同行时，先判断整个for循环中有无同行，循环完无同行添加--%>
	   for(var i=0 ; i<arg1.length ; i++){
		   var arg2 = arg1[i].split(":")[0].split("")[0];
		   //在同一排时，替换同一排，标志位置为1，否则为添加，标志位为0
		   if(parseInt(arg2) == parseInt(num)){
			   var newId = num+''+con;
			   arg1[i] = newId + '' + ":" + proname;
			   flag = 1;
		   }
	   }
	   for(var j=0 ; j<arg1.length ; j++){
		   if(j==0){
		   		notnullstring += arg1[j];
		   }
		   else{
			   notnullstring += ","+arg1[j];
		   }
	   }
	   if(flag == 0){
		  var newId = num+''+con;
		  newstring = ","+newId + '' + ":" + proname;
		  notnullstring += newstring ;
	   }
	   window.location.href = "<%=path %>/list/goodsList.html?sellType=1&order=0&pageNo=0&orderType=0&goodsCatId=<%=request.getAttribute("property")%>&property="+notnullstring;
   	}
	   else{
		   newstring = num+''+con+":"+proname;
		window.location.href = "<%=path %>/list/goodsList.html?sellType=1&order=0&pageNo=0&orderType=0&goodsCatId=<%=request.getAttribute("property")%>&property="+newstring;
	   }
   }

   function quanbu(num){
	   var notnullstring = "";
	   var propertystring  = '<%=request.getAttribute("property")%>';
	   var flag = 0;
	   for(var i=0 ; i<arg1.length ; i++){
		   var arg2 = arg1[i].split(":")[0].split("")[0];
		   if(parseInt(arg2) == parseInt(num)){
			   arg1[i] = "";
		   }
	   }
	   for(var j=0 ; j<arg1.length ; j++){
		   if(j==0){
			   if(arg1[j] == ""){
				   notnullstring += "";
			   	   flag = 1;
			   }
			   else
				  notnullstring += arg1[j];
		   }
		   else{
			   if(arg1[j]=="")
			   		notnullstring += "";
			   else {
				   if(flag == 0)
				   notnullstring += ","+arg1[j];
				   else {
					   notnullstring += arg1[j];
				  	   flag = 0;
				   }
			   }
		   }
		}
	   window.location.href = "<%=path %>/list/goodsList.html?sellType=1&order=0&pageNo=0&orderType=0&goodsCatId=<%=request.getAttribute("property")%>&property="+notnullstring;
   }
</script>

这里href调用的事html页，而html页有<s:action>方法，所以直接可以访问方法

三、后台方法

</pre><pre name="code" class="java">			if (property != null && !(property.equals(""))) {
				String[] arg1 = property.split(",");
				for (int i = 0; i < arg1.length; i++) {
					String[] arg2 = arg1[i].split(":");
					String beforeNum =  arg2[0];
					String afterText = URLDecoder.decode(
							URLDecoder.decode(arg2[1], "utf-8"), "utf-8");
					if(i<arg1.length-1){
						ex_property += afterText + ",";
						ex_propertyNum += beforeNum+",";
					}
					else {
						ex_property += afterText;
						ex_propertyNum += beforeNum;
					}
				}
				String[] ex_arg1 = ex_property.split(",");
				String[] ex_arg2 = ex_propertyNum.split(",");
				for (int j = 0; j < ex_arg1.length; j++) {
					if(j<ex_arg1.length-1)
					return_property += ex_arg2[j]+":"+URLEncoder.encode(
							URLEncoder.encode(ex_arg1[j], "utf-8"), "utf-8")+",";
					else
						return_property += ex_arg2[j]+":"+URLEncoder.encode(
								URLEncoder.encode(ex_arg1[j], "utf-8"), "utf-8");
				}
				ServletActionContext.getRequest().setAttribute("property",
						return_property);
			}

这里return_property 为 需要重新返回到前台记忆的参数，ex_property为已解码的查询参数。

最后是CSS和相对不重要的JS

这里写死了点击样式条件数为7个....还不清楚如何动态确定点击样式

$(document).ready(function(){

	$("#select1 dd").click(function () {
		$(this).addClass("selected").siblings().removeClass("selected");
		if ($(this).hasClass("select-all")) {
			$("#selectA").remove();
		} else {
			var copyThisA = $(this).clone();
			if ($("#selectA").length > 0) {
				$("#selectA a").html($(this).text());
			} else {
				$(".select-result dl").append(copyThisA.attr("id", "selectA"));
			}
		}
	});

	$("#select2 dd").click(function () {
		$(this).addClass("selected").siblings().removeClass("selected");
		if ($(this).hasClass("select-all")) {
			$("#selectB").remove();
		} else {
			var copyThisB = $(this).clone();
			if ($("#selectB").length > 0) {
				$("#selectB a").html($(this).text());
			} else {
				$(".select-result dl").append(copyThisB.attr("id", "selectB"));
			}
		}
	});

	$("#select3 dd").click(function () {
		$(this).addClass("selected").siblings().removeClass("selected");
		if ($(this).hasClass("select-all")) {
			$("#selectC").remove();
		} else {
			var copyThisC = $(this).clone();
			if ($("#selectC").length > 0) {
				$("#selectC a").html($(this).text());
			} else {
				$(".select-result dl").append(copyThisC.attr("id", "selectC"));
			}
		}
	});

	$("#select4 dd").click(function () {
		$(this).addClass("selected").siblings().removeClass("selected");
		if ($(this).hasClass("select-all")) {
			$("#selectD").remove();
		} else {
			var copyThisD = $(this).clone();
			if ($("#selectD").length > 0) {
				$("#selectD a").html($(this).text());
			} else {
				$(".select-result dl").append(copyThisD.attr("id", "selectD"));
			}
		}
	});

	$("#select5 dd").click(function () {
		$(this).addClass("selected").siblings().removeClass("selected");
		if ($(this).hasClass("select-all")) {
			$("#selectE").remove();
		} else {
			var copyThisE = $(this).clone();
			if ($("#selectE").length > 0) {
				$("#selectE a").html($(this).text());
			} else {
				$(".select-result dl").append(copyThisE.attr("id", "selectE"));
			}
		}
	});

	$("#select6 dd").click(function () {
		$(this).addClass("selected").siblings().removeClass("selected");
		if ($(this).hasClass("select-all")) {
			$("#selectF").remove();
		} else {
			var copyThisF = $(this).clone();
			if ($("#selectF").length > 0) {
				$("#selectF a").html($(this).text());
			} else {
				$(".select-result dl").append(copyThisF.attr("id", "selectF"));
			}
		}
	});

	$("#select7 dd").click(function () {
		$(this).addClass("selected").siblings().removeClass("selected");
		if ($(this).hasClass("select-all")) {
			$("#selectG").remove();
		} else {
			var copyThisF = $(this).clone();
			if ($("#selectG").length > 0) {
				$("#selectG a").html($(this).text());
			} else {
				$(".select-result dl").append(copyThisG.attr("id", "selectG"));
			}
		}
	});

	$("#selectA").live("click", function () {
		$(this).remove();
		$("#select1 .select-all").addClass("selected").siblings().removeClass("selected");
	});

	$("#selectB").live("click", function () {
		$(this).remove();
		$("#select2 .select-all").addClass("selected").siblings().removeClass("selected");
	});

	$("#selectC").live("click", function () {
		$(this).remove();
		$("#select3 .select-all").addClass("selected").siblings().removeClass("selected");
	});

	$("#selectD").live("click", function () {
		$(this).remove();
		$("#select4 .select-all").addClass("selected").siblings().removeClass("selected");
	});

	$("#selectE").live("click", function () {
		$(this).remove();
		$("#select5 .select-all").addClass("selected").siblings().removeClass("selected");
	});

	$("#selectF").live("click", function () {
		$(this).remove();
		$("#select6 .select-all").addClass("selected").siblings().removeClass("selected");
	});

	$("#selectG").live("click", function () {
		$(this).remove();
		$("#select7 .select-all").addClass("selected").siblings().removeClass("selected");
	});

	$(".select dd").live("click", function () {
		if ($(".select-result dd").length > 1) {
			$(".select-no").hide();
		} else {
			$(".select-no").show();
		}
	});

});

CSS样式

.select li{list-style:none;padding:10px 0 5px 0px}
.select .select-list{border-bottom:#eee 1px dashed}
.select dl{zoom:1;position:relative;line-height:24px;}
.select dl:after{content:" ";display:block;clear:both;height:0;overflow:hidden}
.select dd{float:left;display:inline;margin:0 0 5px 5px;}
.select a{display:inline-block;white-space:nowrap;height:24px;padding:0 10px;text-decoration:none;color:#039;border-radius:2px;}
.select a:hover{color:#f60;background-color:#f3edc2}
.select .selected a{color:#fff;background-color:#CCCCCC}
.select-result dt{font-weight:bold}
.select-no{color:#999}
.select .select-result a{padding-right:20px;background:#f60 url("../img/close.gif") right 9px no-repeat}
.select .select-result a:hover{background-position:right -15px}

---恢复内容结束---