当前位置：首页 > CMS教程 > DeDecms > 列表

织梦多条件筛选功能实现(dede联动搜索)

发布:smiling　来源: PHP粉丝网 　添加日期：2014-11-08 10:20:47　浏览: 评论：0　

用织梦实现筛选的功能，其实主要就是运用到了织梦的高级搜索功能，然后用ajax去post替换掉本来的结果就可以了。

其实筛选的话，主要有两个问题需要解决，一个是前台的筛选实现，一个是后台根据前台的点击，反馈出相应的结果。

于是在网上搜索了N多的资料了之后，先实现前台的功能，就是你点了之后会有一个筛选的效果出来，当然，也只是一个效果。具体可以参照：jquery仿京东筛选效果。下面就一步一步用织梦来实现这样的功能。

京东的图片如下

织梦多条件筛选功能实现

首先我们先在后台自定义模型

看到参照网站的图片，可以发现商品的话，主要有下面的几个字段：品牌，价格，尺寸，平台，显卡这五个字段。

其中品牌、平台、显卡为option类型，价格为整数类型，尺寸为小数类型，添加模型的时候，记得勾上“使字段可以在列表的底层模板中获得(自定义字段默认仅能在文档模板显示，启用此选项将使列表查询变慢，如无必要请不要选择)”

下面根据我们设置的这些字段，开始直接调用。假如我们的模板目录为/templets/jingdong，那么我们开始在这个文件夹里面新建三个文件，名称分别为filter.htm、filter.js、以及filter.css。

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
  5. <link href="/templets/jingdong/filter.css" rel="stylesheet" type="text/css" /> 
  6. <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
  7. <script src="/templets/jingdong/filter.js" type="text/javascript"></script> 
  8. <title>织梦仿京东筛选</title> 
  9. </head> 
  10. <body> 
  11. <div id="filter"> 
  12.   <dl> 
  13.     <dt>品牌：</dt> 
  14.     <dd> 
  15.       <div><a>全部</a></div> 
  16.     </dd> 
  17.     <dd> 
  18.       <div><a>惠普(hp)</a></div> 
  19.     </dd> 
  20.     <dd> 
  21.       <div><a>联想(Lenovo)</a></div> 
  22.     </dd> 
  23.     <dd> 
  24.       <div><a>联想(ThinkPad)</a></div> 
  25.     </dd> 
  26.     <dd> 
  27.       <div><a>宏基(acer)</a></div> 
  28.     </dd> 
  29.     <dd> 
  30.       <div><a>华硕</a></div> 
  31.     </dd> 
  32.     <dd> 
  33.       <div><a>戴尔</a></div> 
  34.     </dd> 
  35.     <dd> 
  36.       <div><a>三星</a></div> 
  37.     </dd> 
  38.     <dd> 
  39.       <div><a>索尼</a></div> 
  40.     </dd> 
  41.     <dd> 
  42.       <div><a>东芝</a></div> 
  43.     </dd> 
  44.     <dd> 
  45.       <div><a>Gateway</a></div> 
  46.     </dd> 
  47.     <dd> 
  48.       <div><a>微星</a></div> 
  49.     </dd> 
  50.     <dd> 
  51.       <div><a>海尔</a></div> 
  52.     </dd> 
  53.     <dd> 
  54.       <div><a>清华同方</a></div> 
  55.     </dd> 
  56.     <dd> 
  57.       <div><a>富士通</a></div> 
  58.     </dd> 
  59.     <dd> 
  60.       <div><a>苹果(Apple)</a></div> 
  61.     </dd> 
  62.     <dd> 
  63.       <div><a>神舟</a></div> 
  64.     </dd> 
  65.     <dd> 
  66.       <div><a>方正</a></div> 
  67.     </dd> 
  68.     <dd> 
  69.       <div><a>优雅</a></div> 
  70.     </dd> 
  71.   </dl> 
  72.   <dl> 
  73.     <dt>价格：</dt> 
  74.     <dd> 
  75.       <div><a>全部</a></div> 
  76.     </dd> 
  77.     <dd> 
  78.       <div><a>1000-2999</a></div> 
  79.     </dd> 
  80.     <dd> 
  81.       <div><a>3000-3499</a></div> 
  82.     </dd> 
  83.     <dd> 
  84.       <div><a>3500-3999</a></div> 
  85.     </dd> 
  86.     <dd> 
  87.       <div><a>4000-4499</a></div> 
  88.     </dd> 
  89.     <dd> 
  90.       <div><a>4500-4999</a></div> 
  91.     </dd> 
  92.     <dd> 
  93.       <div><a>5000-5999</a></div> 
  94.     </dd> 
  95.     <dd> 
  96.       <div><a>6000-6999</a></div> 
  97.     </dd> 
  98.     <dd> 
  99.       <div><a>7000-9999</a></div> 
  100.     </dd> 
  101.     <dd> 
  102.       <div><a>10000以上</a></div> 
  103.     </dd> 
  104.   </dl> 
  105.   <dl> 
  106.     <dt>尺寸：</dt> 
  107.     <dd> 
  108.       <div><a>全部</a></div> 
  109.     </dd> 
  110.     <dd> 
  111.       <div><a>8.9英寸及以下</a></div> 
  112.     </dd> 
  113.     <dd> 
  114.       <div><a>11英寸</a></div> 
  115.     </dd> 
  116.     <dd> 
  117.       <div><a>12英寸</a></div> 
  118.     </dd> 
  119.     <dd> 
  120.       <div><a>13英寸</a></div> 
  121.     </dd> 
  122.     <dd> 
  123.       <div><a>14英寸</a></div> 
  124.     </dd> 
  125.     <dd> 
  126.       <div><a>15英寸</a></div> 
  127.     </dd> 
  128.     <dd> 
  129.       <div><a>16英寸-17英寸</a></div> 
  130.     </dd> 
  131.   </dl> 
  132.   <dl> 
  133.     <dt>平台：</dt> 
  134.     <dd> 
  135.       <div><a>全部</a></div> 
  136.     </dd> 
  137.     <dd> 
  138.       <div><a>AMD Brazos APU平台</a></div> 
  139.     </dd> 
  140.     <dd> 
  141.       <div><a>Intel Sandy Bridge平台</a></div> 
  142.     </dd> 
  143.     <dd> 
  144.       <div><a>Intel平台</a></div> 
  145.     </dd> 
  146.     <dd> 
  147.       <div><a>AMD平台</a></div> 
  148.     </dd> 
  149.   </dl> 
  150.   <dl> 
  151.     <dt>显卡：</dt> 
  152.     <dd> 
  153.       <div><a>全部</a></div> 
  154.     </dd> 
  155.     <dd> 
  156.       <div><a>独立显卡</a></div> 
  157.     </dd> 
  158.     <dd> 
  159.       <div><a>集成显卡</a></div> 
  160.     </dd> 
  161.     <dd> 
  162.       <div><a>核芯显卡</a></div> 
  163.     </dd> 
  164.   </dl> 
  165. </div> 
  166. </body> 
  167. </html> 

然后把面的代码复制进去,现在把filter.css以及flter.js也分别复制好.

  1. @charset "gb2312"; 
  2. /* CSS Document */ 
  3.  
  4. #filter { 
  5.     width:620px; 
  6.     height:auto; 
  7.     margin-left:auto; 
  8.     margin-right:auto; 
  9.     font-size:12px; 
  10. } 
  11. #filter dl { 
  12.     padding:0; 
  13.     margin-top:0; 
  14.     margin-bottom:0; 
  15.     clear:both; 
  16.     padding:4px 0; 
  17. } 
  18. #filter dt, dd { 
  19.     display:block; 
  20.     float:left; 
  21.     width:auto; 
  22.     padding:0; 
  23.     margin:3px 0; 
  24. } 
  25. #filter dt { 
  26.     height:14px; 
  27.     padding-bottom:4px; 
  28.     font-weight:bold; 
  29.     color:#333333; 
  30. } 
  31. #filter dd { 
  32.     color:#005AA0; 
  33.     margin-right:8px; 
  34. } 
  35. #filter a { 
  36.     cursor:pointer; 
  37. } 
  38. .seling { 
  39.     background-color:#005AA0; 
  40.     color:#FFFFFF; 
  41. } 
  42. .seled { 
  43.     background-color:#005AA0; 
  44.     color:#FFFFFF; 
  45. } 
  46. // JavaScript Document 
  47. $(function () {  
  48.     //选中filter下的所有a标签，为其添加hover方法，该方法有两个参数，分别是鼠标移上和移开所执行的函数。  
  49.     $("#filter a").hover(  
  50.         function () {  
  51.             $(this).addClass("seling");  
  52.         },  
  53.         function () {  
  54.             $(this).removeClass("seling");  
  55.         }  
  56.     );  
  57.  
  58.     //选中filter下所有的dt标签，并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)  
  59.     $("#filter dt+dd a").attr("class", "seled"); /*注意：这儿应该是设置(attr)样式，而不是添加样式(addClass)， 
  60.                                                   不然后面通过$("#filter a[class='seled']")访问不到class样式为seled的a标签。*/         
  61.  
  62.     //为filter下的所有a标签添加单击事件  
  63.     $("#filter a").click(function () {  
  64.         $(this).parents("dl").children("dd").each(function () {  
  65.             //下面三种方式效果相同（第三种写法的内部就是调用了find()函数，所以，第二、三种方法是等价的。）  
  66.             //$(this).children("div").children("a").removeClass("seled");  
  67.             //$(this).find("a").removeClass("seled");  
  68.             $('a',this).removeClass("seled");  
  69.         });  
  70.  
  71.         $(this).attr("class", "seled");  
  72.  
  73.         alert(RetSelecteds()); //返回选中结果  
  74.     });  
  75.     alert(RetSelecteds()); //返回选中结果  
  76. });  
  77.  
  78. function RetSelecteds() {  
  79.     var result = "";  
  80.     $("#filter a[class='seled']").each(function () {  
  81.         result += $(this).html()+"\n";  
  82.     });  
  83.     return result;  
  84. } 

如果步骤按照上面的步骤来操作的话这时候直接打开filter.htm已经可以看到效果了，那么下面要做的就是在织梦里面，用织梦的东西往里面去套。

上一页 1 2 下一页

Tags: 织梦条件筛选 dede联动搜索

分享到：

推荐文章

热门文章

最新评论文章