<span id="pfnzv"></span>
      <form id="pfnzv"><span id="pfnzv"></span></form><address id="pfnzv"><span id="pfnzv"><nobr id="pfnzv"></nobr></span></address>
      <form id="pfnzv"><dfn id="pfnzv"><listing id="pfnzv"></listing></dfn></form>

        <sub id="pfnzv"><address id="pfnzv"></address></sub>
          <address id="pfnzv"><form id="pfnzv"><listing id="pfnzv"></listing></form></address>
          <address id="pfnzv"><address id="pfnzv"><nobr id="pfnzv"></nobr></address></address>

            <address id="pfnzv"></address>
            0712-2888027 189-8648-0214
            微信公眾號

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

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

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

            時間:2024-06-06來源:風信官網 點擊: 821次

            先看看完成后的效果圖:

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

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

            欄目列表
            推薦內容
            熱點內容
            展開
            国产精久久久久无码AV动漫|最新亚洲精品国偷自产在线|2021亚洲色中文字幕在线|最新无码av中文字专区 情欲美妇紧致敏感 国产免费AⅤ片在线播放 人妻爽爽免费在线视频 51精品国产人成在线观看 色偷偷av一区二区三区
            <span id="pfnzv"></span>
                <form id="pfnzv"><span id="pfnzv"></span></form><address id="pfnzv"><span id="pfnzv"><nobr id="pfnzv"></nobr></span></address>
                <form id="pfnzv"><dfn id="pfnzv"><listing id="pfnzv"></listing></dfn></form>

                  <sub id="pfnzv"><address id="pfnzv"></address></sub>
                    <address id="pfnzv"><form id="pfnzv"><listing id="pfnzv"></listing></form></address>
                    <address id="pfnzv"><address id="pfnzv"><nobr id="pfnzv"></nobr></address></address>

                      <address id="pfnzv"></address>