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

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

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

1.如何记忆查询参数

2.如何前后台传值

3.中文处理

。

解答：

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

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

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

详细代码如下：

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

 

               

               ${param.name }
          

                    全部商品 - 商品筛选
          
          

                   ${requestScope.content } - 商品筛选
               
              
            

			

               
               

               
${pro.propertyName }：
               

               全部
               
               

               ${proName }
               
                 
                
  
               
              
              
              <%--通过记忆的property来刷新页面时显示之前已筛选的property --%>
               
               

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

显示之前记忆的查询条件

点击新的查询条件事件

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

三、后台方法

			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

这里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}