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

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

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

分享到: