我一定写了一个假的技术博客
当前位置: 首页>> 技术宅 >> 正文

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 编写如下:

  1. <div class="p_col_s1"> 
  2.     活动分类:  
  3.     <a href="javascript:filter('col','')" class="p_col" id="col_all">全部</a> 
  4.     <volist name="res2" id="vo2"> 
  5.         <a href='javascript:filter("col","{$vo2.colid}");' class="p_col" id="col_{$vo2.colid}">{$vo2.colname}</a> 
  6.     </volist> 
  7. </div> 
  8. <div class="p_col_s1"> 
  9.     筛选条件:  
  10.     <a href='javascript:filter("tl","");' class="p_col" id="tl2">查看全部</a> 
  11.     <a href='javascript:filter("tl","1");' class="p_col" id="tl1">只看未过期</a> 
  12. </div> 
  13. <div class="p_col_s1"> 
  14.     安全分类:  
  15.     <a href="javascript:filter('s','')" class="p_col" id="s_all">全部</a> 
  16.     <a href='javascript:filter("s","0");' class="p_col" id="s0">安全</a> 
  17.     <a href='javascript:filter("s","1");' class="p_col" id="s1">一般</a> 
  18.     <a href='javascript:filter("s","2");' class="p_col" id="s2">危险</a> 
  19. </div> 

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

  1. $(function() {  
  2.     var colid = "{:I('col')}";  
  3.     if (colid != "") {  
  4.         $("#col_" + colid).addClass('p_col_hover');  
  5.     } else {  
  6.         $("#col_all").addClass('p_col_hover');  
  7.     }  
  8.     var tl = "{:I('tl')}";  
  9.     if (tl == "1") {  
  10.         $("#tl" + tl).addClass('p_col_hover');  
  11.     } else {  
  12.         $("#tl2").addClass('p_col_hover');  
  13.     }  
  14.     var s = "{:I('s')}";  
  15.     if (s != "") {  
  16.         $("#s" + s).addClass('p_col_hover');  
  17.     } else {  
  18.         $("#s_all").addClass('p_col_hover');  
  19.     }  
  20. }) 

至此,已经实现了高亮。

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

  1. function filter(a, b) {  
  2.         var str = "__URL__/po/";  
  3.         var colid = "{:I('col')}";  
  4.         if (colid != "" && a != "col") {  
  5.             str = str + "col/" + colid + "/";  
  6.         }  
  7.         var tl = "{:I('tl')}";  
  8.         if (tl != "" && a != "tl") {  
  9.             str = str + "tl/" + tl + "/";  
  10.         }  
  11.         var s = "{:I('s')}";  
  12.         if (s != "" && a != "s") {  
  13.             str = str + "s/" + s + "/";  
  14.         }  
  15.         if (b != "") {  
  16.             str = str + a + "/" + b + "/";  
  17.         }  
  18.         window.location.href = str;  
  19.     } 

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

最终实现的效果如下:

实现效果

版权保护: 本文由 唐野 原创,转载请保留链接: http://www.yelook.com/1998.html

立即打赏
  • 支付宝打赏

  • 微信打赏

  • 如果这篇文章对您有帮助,欢迎点击上方按钮给我打赏。

    1 条吐槽

    Loading...
    1. 姜辰

      好专业啊~

      2017-04-12 [回复]

    发布评论