1. <track id="w0gxx"><strike id="w0gxx"><menu id="w0gxx"></menu></strike></track>
      2. 0712-2888027 189-8648-0214
        微信公眾號

        孝感風信網絡科技有限公司微信公眾號

        當前位置:主頁 > 技術支持 > PHP > destoon供應模塊增加房產篩選功能

        destoon供應模塊增加房產篩選功能

        時間:2024-01-14來源:風信官網 點擊: 651次

        先看看完成后的效果圖:

        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")}-->  

        這樣一個粗糙的篩選模塊就制作好了。

        欄目列表
        推薦內容
        熱點內容
        展開
        久久99精品久久久久久久不卡_日本一区二区三不卡高清区免费_久久精品无码免费观看_麻豆av一区二区无码