首页 / 技术 / 正文

ThinkPHP中使用jQuery实现多条件组合筛选

2017年04月12日 1 条评论 ... 技术

多条件组合筛选,可以实现用户根据多个条件灵活组合查询,最经典的案例就是购物网站上的组合筛选。

淘宝多条件筛选

使用 ThinkPHP 编写多条件组合筛选不是特别好实现,最直接的方法就是使用 js 辅助。本案例使用的是 jquery。

这里要实现的功能如下:

多组筛选分类相互不冲突;

选择的条件都会高亮显示(增加样式)

URL对应发生变化

解决的思路是,使用 jquery ,对每次点击进行判断,利用 ThinkPHP 方便的地址常量的输出,直接生成对应的 URL,然后通过 jquery 跳转。

所以关键就是每次点击按钮生成正确的URL,并且利用 jquery 打开它。

事先复习一下 ThinkPHP 的常量输出的方法:

代码表示解释
__URL__生成当前方法的URL
{:I('xx')}在页面中输出URL中传递的响应的参数值

首先是实现给点击筛选条件高亮,具体实现思路与我之前编写的 ThinkPHP制作导航高亮和当前页高亮显示的最佳方法 类似。事先在筛选条件上做标记,利用 {:I('xx')} 可以在页面中获得 URL 中的参数值,然后根据参数值和标记对比,给当前的条件增加 css ,达到高亮的效果。

比如,我的筛选 HTML 编写如下:

<html>
 <head></head>
 <body>
  <div class="p_col_s1">
    活动分类: 
   <a href="javascript:filter('col','')" class="p_col" id="col_all">全部</a> 
   <volist name="res2" id="vo2"> 
    <a href="javascript:filter(&quot;col&quot;,&quot;{$vo2.colid}&quot;);" class="p_col" id="col_{$vo2.colid}">{$vo2.colname}</a> 
   </volist> 
  </div> 
  <div class="p_col_s1">
    筛选条件: 
   <a href="javascript:filter(&quot;tl&quot;,&quot;&quot;);" class="p_col" id="tl2">查看全部</a> 
   <a href="javascript:filter(&quot;tl&quot;,&quot;1&quot;);" class="p_col" id="tl1">只看未过期</a> 
  </div> 
  <div class="p_col_s1">
    安全分类: 
   <a href="javascript:filter('s','')" class="p_col" id="s_all">全部</a> 
   <a href="javascript:filter(&quot;s&quot;,&quot;0&quot;);" class="p_col" id="s0">安全</a> 
   <a href="javascript:filter(&quot;s&quot;,&quot;1&quot;);" class="p_col" id="s1">一般</a> 
   <a href="javascript:filter(&quot;s&quot;,&quot;2&quot;);" class="p_col" id="s2">危险</a> 
  </div> 
 </body>
</html>

然后编写 jquery 代码,因为需要页面打开就运行,所以需要把代码写在 $(function(){…}) 中

$(function() {
	var colid = "{:I('col')}";
	if (colid != "") {
		$("#col_" + colid).addClass('p_col_hover');
	} else {
		$("#col_all").addClass('p_col_hover');
	}
	var tl = "{:I('tl')}";
	if (tl == "1") {
		$("#tl" + tl).addClass('p_col_hover');
	} else {
		$("#tl2").addClass('p_col_hover');
	}
	var s = "{:I('s')}";
	if (s != "") {
		$("#s" + s).addClass('p_col_hover');
	} else {
		$("#s_all").addClass('p_col_hover');
	}
})

至此,已经实现了高亮。

接下来是实现组装 URL 并且打开了。我对每一个筛选条件的 URL 进行了修改,将其指向了 javascript 方法 filter(),方法代码如下:

function filter(a, b) {
	var str = "__URL__/po/";
	var colid = "{:I('col')}";
	if (colid != "" && a != "col") {
		str = str + "col/" + colid + "/";
	}
	var tl = "{:I('tl')}";
	if (tl != "" && a != "tl") {
		str = str + "tl/" + tl + "/";
	}
	var s = "{:I('s')}";
	if (s != "" && a != "s") {
		str = str + "s/" + s + "/";
	}
	if (b != "") {
		str = str + a + "/" + b + "/";
	}
	window.location.href = str;
}

其中两个参数,a 和 b ,a 参数用来识别筛选组,b用来识别选项组里的选项。方法逐个试图获取 URL 中的参数,如果有,则追加到临时字符串中,如果没有则跳过,为了避免重复,在判断中还增加了判断是否是同一组,如果是同一组,则不会追加,最后走完在最后增加新点击的参数,最终组合成为目标 URL ,进行跳转。

最终实现的效果如下:

实现效果

1 条评论

Loading...
  1. 姜辰

    好专业啊~

    2017-04-12 [回复]

发布评论