多条件查询 仿淘宝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}
---恢复内容结束---
好的代码像粥一样，都是用时间熬出来的
