Single
织梦CMS

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

avatar
pcwnas 2023-04-21 304
0 评论

原文来自：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*/
  4. #filter{
  5. width:620px;
  6. height:auto;
  7. margin-left:auto;
  8. margin-right:auto;
  9. font-size:12px;
  10. }
  11. #filterdl{
  12. padding:0;
  13. margin-top:0;
  14. margin-bottom:0;
  15. clear:both;
  16. padding:4px0;
  17. }
  18. #filterdt,dd{
  19. display:block;
  20. float:left;
  21. width:auto;
  22. padding:0;
  23. margin:3px0;
  24. }
  25. #filterdt{
  26. height:14px;
  27. padding-bottom:4px;
  28. font-weight:bold;
  29. color:#333333;
  30. }
  31. #filterdd{
  32. color:#005AA0;
  33. margin-right:8px;
  34. }
  35. #filtera{
  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. //JavaScriptDocument
  47. $(function(){
  48. //选中filter下的所有a标签，为其添加hover方法，该方法有两个参数，分别是鼠标移上和移开所执行的函数。
  49. $("#filtera").hover(
  50. function(){
  51. $(this).addClass("seling");
  52. },
  53. function(){
  54. $(this).removeClass("seling");
  55. }
  56. );
  58. //选中filter下所有的dt标签，并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)
  59. $("#filterdt+dda").attr("class","seled");/*注意：这儿应该是设置(attr)样式，而不是添加样式(addClass)，
  60. 不然后面通过$("#filtera[class='seled']")访问不到class样式为seled的a标签。*/
  62. //为filter下的所有a标签添加单击事件
  63. $("#filtera").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. });
  71. $(this).attr("class","seled");
  73. alert(RetSelecteds());//返回选中结果
  74. });
  75. alert(RetSelecteds());//返回选中结果
  76. });
  78. functionRetSelecteds(){
  79. varresult="";
  80. $("#filtera[class='seled']").each(function(){
  81. result+=$(this).html()+"\n";
  82. });
  83. returnresult;
  84. }

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