0712-2888027 189-8648-0214
微信公众号

孝感风信网络科技有限公司微信公众号

当前位置: 主页 > 技术支持 > PHP > destoon供应模块增加房产筛选功能

destoon供应模块增加房产筛选功能

时间:2018-05-05来源:风信网 点击:

先看看完成后的效果图:

destoon供应模块增加房产筛选功能

下面一步步来实现这样的效果。

首先我们把这个筛选模块的html结构写出来,如下:

  1. <!--搜索区域开始-->  
  2.         <div class="center">  
  3.             <div class="search_area-top"></div>  
  4.             <div style="POSITION: relative" class="search_area-center">  
  5.                 <div class="search_area-text" id="Tzone">  
  6.                 <h1>区域:</h1>  
  7.                 <ul>  
  8.                   <li class="selected"><a href="javascript:goSort('Tzone',0)">全部</a></li>  
  9.                   <li><a href="javascript:goSort('Tzone',1)">桂林</a></li>  
  10.                   <li><a href="javascript:goSort('Tzone',2)">上海</a> </li>  
  11.                   <li><a href="javascript:goSort('Tzone',3)">南宁</a> </li>  
  12.                 </ul>  
  13.                 </div>  
  14.   
  15.                 <div class="search_area-text2" id="Tarea">  
  16.                 <h1>面积:</h1>  
  17.                 <ul>  
  18.                   <li class="selected"><a href="javascript:goSort('Tarea',0);">全部</a> </li>  
  19.                   <li><a href="javascript:goSort('Tarea',1);">500平米以下</a>   
  20.                   </li>  
  21.                   <li><a href="javascript:goSort('Tarea',2);">500-1000平米</a>   
  22.                   </li>  
  23.                   <li><a href="javascript:goSort('Tarea',3);">1000-1500平米</a>   
  24.                   </li>  
  25.                   <li><a href="javascript:goSort('Tarea',8);">1500平米以上</a>   
  26.                   </li></ul></div>  
  27.                 <div class="search_area-text2" id="Tprice">  
  28.                 <h1>租金:</h1>  
  29.                 <ul>  
  30.                   <li class="selected"><a href="javascript:goSort('Tprice',0);">全部</a> </li>  
  31.                   <li><a href="javascript:goSort('Tprice',1);">10元/平米以下</a>   
  32.                   </li>  
  33.                   <li><a href="javascript:goSort('Tprice',2);">10-15元/平米</a>   
  34.                   </li>  
  35.                   <li><a href="javascript:goSort('Tprice',3);">15-20元/平米</a>   
  36.                   </li>  
  37.                   <li><a href="javascript:goSort('Tprice',4);">20-25元/平米</a>   
  38.                   </li>  
  39.                   <li><a href="javascript:goSort('Tprice',5);">25元/平米以上</a>   
  40.                   </li></ul></div>  
  41.                 <div class="search_area-text2" id="Tfloor">  
  42.                 <h1>楼层:</h1>  
  43.                 <ul>  
  44.                   <li class="selected"><a href="javascript:goSort('Tfloor',0);">全部</a> </li>  
  45.                   <li><a href="javascript:goSort('Tfloor',1);">一楼</a> </li>  
  46.                   <li><a href="javascript:goSort('Tfloor',2);">二楼以上</a>   
  47.                   </li>  
  48.                   </ul>  
  49.                 </div>  
  50.                 <div class="search_area-text2" id="Tstructure">  
  51.                 <h1>结构:</h1>  
  52.                 <ul>  
  53.                   <li class="selected"><a href="javascript:goSort('Tstructure',0);">全部</a> </li>  
  54.                   <li><a href="javascript:goSort('Tstructure',1);">标准厂房</a>   
  55.                   </li>  
  56.                   <li><a href="javascript:goSort('Tstructure',2);">简易厂房</a>   
  57.                   </li>  
  58.                   <li><a href="javascript:goSort('Tstructure',3);">钢结构</a>   
  59.                   </li>  
  60.                   <li><a href="javascript:goSort('Tstructure',4);">其他</a>   
  61.                   </li>  
  62.                 </ul>  
  63.                 </div>  
  64.             </div>  
  65.             <div class="search_area-foot"></div>  
  66.         </div>  
  67.         <!--搜索区域结束-->  

然后在skin/default/sell.css里,为此模块增加相应的css,如下:
 
  1. /*For search nav*/  
  2. .search_area-top{background:url(image/searcharea_top.jpg) no-repeat; height:16px;}  
  3. .search_area-center{ border-left:1px solid #f4c0a7; border-right:1px solid #f4c0a7; background:#FFFFFF; padding-left:22px; line-height:20px;}  
  4. .search_area-center2{ border-left:1px solid #f4c0a7; border-right:1px solid #f4c0a7; background:#FFFFFF; padding-left:30px; padding-right:20px;}  
  5. .search_area-text{ overflow:hidden; height:100%; padding-top:5px; padding-bottom:5px;}  
  6. .search_area-text h1{ color:#6a6a6a; font-weight:bold; float:left; font-size:12px; margin:0px; padding:0px;}  
  7. .search_area-text ul{ margin:0; padding:0; list-style:none; float:left; overflow:hidden; height:100%; width:710px;}  
  8. .search_area-text li{ list-style:none; color:#6a6a6a; float:left; width:50px; padding-left:8px; padding-right:5px; white-space:nowrap}  
  9. .search_area-text li a{ list-style:none; color:#6a6a6a;}  
  10. .search_area-text li a:hover{ list-style:none; color:#ed6b2e; font-weight:bold; text-decoration:underline;}  
  11. .search_area-text li.selected{color:#ed6b2e; font-weight:bold;}  
  12. .search_area-text li.selected a{color:#ed6b2e;}  
  13. .search_area-text li.selected a:hover{color:#ed6b2e;}  
  14. .search_area-textdown{ overflow:hidden; height:100%; width:705px; padding-top:5px; padding-bottom:3px; background:#fff7f5}  
  15. .search_area-textdown ul{ margin:0; padding:0; list-style:none; float:left; overflow:hidden; height:100%;}  
  16. .search_area-textdown li{ list-style:none; color:#ed8d61; text-decoration:underline; float:left; padding-left:10px; padding-right:10px;}  
  17. .search_area-textdown li a{color:#ed8d61; text-decoration:underline;}  
  18. .search_area-textdown li a:hover{color:#ed8d61; text-decoration:underline;}  
  19. .search_area-textdown li.selected{color:#ed8d61; font-weight:bold;}  
  20.   
  21. .search_area-text2{ overflow:hidden; height:100%; padding-top:5px; padding-bottom:5px;}  
  22. .search_area-text2 h1{ color:#6a6a6a; font-weight:bold; float:left; font-size:12px; margin:0px; padding:0px;}  
  23. .search_area-text2 ul{ margin:0; padding:0; list-style:none; float:left; overflow:hidden; height:100%; width:710px;}  
  24. .search_area-text2 li{ list-style:none; font-family:Verdana, Arial, Helvetica, sans-serif; color:#6a6a6a; float:left; padding-left:8px; padding-right:5px; white-space:nowrap}  
  25. .search_area-text2 li a{ list-style:none; color:#6a6a6a;}  
  26. .search_area-text2 li a:hover{ list-style:none; color:#ed6b2e; font-weight:bold; text-decoration:underline;}  
  27. .search_area-text2 li.selected a{color:#ed6b2e; font-weight:bold;}  
  28.   
  29. .search_area-foot{background:url(image/searcharea_foot.jpg) no-repeat; height:18px;}  

下一步,为此模块增加javascript代码来进行控制,如下:

(这里使用到了jquery,所以需要在template/default/sell/index.htm 页里先引入jquery 1.7版本;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>)

下面添加控制的js代码:

 
  1. function getQueryString(){  
  2.      var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g"));   
  3.      if(result == null){  
  4.          return "";  
  5.      }  
  6.      for(var i = 0; i < result.length; i++){  
  7.          result[i] = result[i].substring(1);  
  8.      }  
  9.      return result;  
  10. }  
  11.   
  12. function goSort(name,value){  
  13.     var string_array = getQueryString();  
  14.     var oldUrl = (document.URL.indexOf("index.php")==-1)?document.URL+"index.php":document.URL;  
  15.     var newUrl;  
  16.     if(string_array.length>0)//如果已经有筛选条件  
  17.     {   var repeatField = false;      
  18.         for(var i=0;i<string_array.length;i++){  
  19.             if(!(string_array[i].indexOf(name)==-1)){  
  20.                 repeatField = true;//如果有重复筛选条件,替换条件值  
  21.                 newUrl = oldUrl.replace(string_array[i],name+"="+value);  
  22.             }     
  23.         }  
  24.           
  25.         //如果没有重复的筛选字段  
  26.         if(repeatField == false){  
  27.             newUrl = oldUrl+"&"+name+"="+value;  
  28.         }  
  29.           
  30.     }else{//如果还没有筛选条件  
  31.         newUrl = oldUrl+"?"+name+"="+value;  
  32.     }  
  33.       
  34.     //跳转  
  35.     window.location = newUrl;  
  36. }  
  37.   
  38. function setSelected(name,value){  
  39.     var all_li = $("#"+name).find("li");  
  40.     //清除所有li标签的selected类  
  41.     all_li.each(function(){  
  42.         $(this).removeClass("selected");  
  43.     });  
  44.     //为选中的li增加selected类  
  45.     all_li.eq(value).addClass("selected");  
  46. }  
  47.   
  48. $(document).ready(function(){  
  49.     var string_array = getQueryString();  
  50.     for(var i=0;i<string_array.length;i++){  
  51.         var tempArr = string_array[i].split("=");  
  52.         setSelected(tempArr[0],tempArr[1]);//设置选中的筛选条件  
  53.     }  
  54. });  

进入系统后台,在供应模块的模块设置里增加几个自定义字段,字段对应筛选模块的筛选条件:

destoon供应模块增加房产筛选功能

 

因为我们是以get方式来提交筛选条件的,所以需要对sell/index.php做一些调整,把接收到的筛选参数加入到当前变量表中,

这样当module/sell/index.inc.php调用相应的index.htm模板时,可以以变量的方式在页面取到筛选条件的值,修改如下:

 
  1. <?php  
  2. define('DT_REWRITE', true);  
  3. require 'config.inc.php';  
  4. require '../common.inc.php';  
  5. extract($GET,EXTR_OVERWRITE);//筛选条件参数加入到当前变量列表  
  6. require DT_ROOT.'/module/'.$module.'/index.inc.php';  
  7. ?>  

接下来我们要做的就是根据筛选条件,刷新页面这一块的内容就行了:

destoon供应模块增加房产筛选功能

这一块在template/default/sell/index.htm页面里是以标签的方式来调用内容的:

 
  1. <!--{tag("moduleid=$moduleid&condition=status=3$dtype&areaid=$cityid&catid=$catid&pagesize=".$MOD[pagesize]."&page=$page&showpage=1&datetype=5&order=".$MOD[order]."&fields=".$MOD[fields]."&template=list-sell")}-->  

所以我们只要把筛选条件拼接到condition里,就可以了,当然筛选条件还需要进行一些处理,这里我写死了,改成如下代码:
 
  1. {php $condition = "status=3";}  
  2. {php $Tarea_array = array(1=>'czzmj<500',2=>'czzmj between 500 and 1000',3=>'czzmj between 1000 and 1500',4=>'czzmj>1500');}  
  3. {php $Tprice_array = array(1=>'price=10',2=>'price between 10 and 15',3=>'price between 15 and 20',4=>'price between 20 and 25',5=>'price>25');}  
  4. {php $Tfloor_array = array(1=>'floor=1',2=>'floor>=2');}  
  5. {php $Tstructure_array = array(1=>'标准厂房',2=>'简易厂房',3=>'钢结构');}  
  6.   
  7.   
  8. {if isset($Tzone)&&($Tzone!=0)}  
  9. {php $condition.=" and areaid=$Tzone";}  
  10. {/if}  
  11. {if isset($Tarea)&&($Tarea!=0)}  
  12. {php $condition.=" and $Tarea_array[$Tarea]";}  
  13. {/if}  
  14. {if isset($Tprice)&&($Tprice!=0)}  
  15. {php $condition.=" and $Tprice_array[$Tprice]";}  
  16. {/if}  
  17. {if isset($Tfloor)&&($Tfloor!=0)}  
  18. {php $condition.=" and $Tfloor_array[$Tfloor]";}  
  19. {/if}  
  20. {if isset($Tstructure)&&($Tstructure!=0)}  
  21. {php $condition.=" and structure=$Tstructure";}  
  22. {/if}  
  23. <!--{tag("moduleid=$moduleid&condition=$condition$dtype&areaid=$cityid&catid=$catid&pagesize=".$MOD[pagesize]."&page=$page&showpage=1&datetype=5&order=".$MOD[order]."&fields=".$MOD[fields]."&template=list-sell")}-->  

这样一个粗糙的筛选模块就制作好了。

栏目列表
推荐内容
热点内容
展开