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

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

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

使用 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 ，进行跳转。

最终实现的效果如下：

赏

感谢你的赏识与认可

支付宝

微信支付

使用手机访问这篇文章

本文链接：https://www.yelook.com/1998.html

1 条评论

姜辰

好专业啊~

2017-04-12 [回复]

原野日和

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

1 条评论

发布评论

最新文章

热门文章