原文来自:https://www.zixuephp.com

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

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

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

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

京东的图片如下

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

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

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

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

  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
  5. <linkhref="/templets/jingdong/filter.css"rel="stylesheet"type="text/css"/>
  6. <scriptsrc="http://code.jquery.com/jquery-latest.js"type="text/javascript"></script>
  7. <scriptsrc="/templets/jingdong/filter.js"type="text/javascript"></script>
  8. <title>织梦仿京东筛选</title>
  9. </head>
  10. <body>
  11. <divid="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>AMDBrazosAPU平台</a></div>
  139. </dd>
  140. <dd>
  141. <div><a>IntelSandyBridge平台</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. /*CSSDocument*/
  3. #filter{
  4. width:620px;
  5. height:auto;
  6. margin-left:auto;
  7. margin-right:auto;
  8. font-size:12px;
  9. }
  10. #filterdl{
  11. padding:0;
  12. margin-top:0;
  13. margin-bottom:0;
  14. clear:both;
  15. padding:4px0;
  16. }
  17. #filterdt,dd{
  18. display:block;
  19. float:left;
  20. width:auto;
  21. padding:0;
  22. margin:3px0;
  23. }
  24. #filterdt{
  25. height:14px;
  26. padding-bottom:4px;
  27. font-weight:bold;
  28. color:#333333;
  29. }
  30. #filterdd{
  31. color:#005AA0;
  32. margin-right:8px;
  33. }
  34. #filtera{
  35. cursor:pointer;
  36. }
  37. .seling{
  38. background-color:#005AA0;
  39. color:#FFFFFF;
  40. }
  41. .seled{
  42. background-color:#005AA0;
  43. color:#FFFFFF;
  44. }
  45. //JavaScriptDocument
  46. $(function(){
  47. //选中filter下的所有a标签,为其添加hover方法,该方法有两个参数,分别是鼠标移上和移开所执行的函数。
  48. $("#filtera").hover(
  49. function(){
  50. $(this).addClass("seling");
  51. },
  52. function(){
  53. $(this).removeClass("seling");
  54. }
  55. );
  56. //选中filter下所有的dt标签,并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)
  57. $("#filterdt+dda").attr("class","seled");/*注意:这儿应该是设置(attr)样式,而不是添加样式(addClass),
  58. 不然后面通过$("#filtera[class='seled']")访问不到class样式为seled的a标签。*/
  59. //为filter下的所有a标签添加单击事件
  60. $("#filtera").click(function(){
  61. $(this).parents("dl").children("dd").each(function(){
  62. //下面三种方式效果相同(第三种写法的内部就是调用了find()函数,所以,第二、三种方法是等价的。)
  63. //$(this).children("div").children("a").removeClass("seled");
  64. //$(this).find("a").removeClass("seled");
  65. $('a',this).removeClass("seled");
  66. });
  67. $(this).attr("class","seled");
  68. alert(RetSelecteds());//返回选中结果
  69. });
  70. alert(RetSelecteds());//返回选中结果
  71. });
  72. functionRetSelecteds(){
  73. varresult="";
  74. $("#filtera[class='seled']").each(function(){
  75. result+=$(this).html()+"\n";
  76. });
  77. returnresult;
  78. }

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