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

先看看完成後的：

下面一步步來實現這樣的效果。

首先我們把這個篩選模組的html結構寫出來，如下：

<!--搜尋地區開始--><div class="center"><div class="search_area-top"></div><div style="POSITION: relative" class="search_area-center"><div class="search_area-text" id="Tzone"><h1>地區：</h1><ul>  <li class="selected"><a href="javascript:goSort('Tzone',0)">全部</a></li>  <li><a href="javascript:goSort('Tzone',1)">桂林</a></li>  <li><a href="javascript:goSort('Tzone',2)">上海</a> </li>  <li><a href="javascript:goSort('Tzone',3)">南寧</a> </li></ul></div><div class="search_area-text2" id="Tarea"><h1>面積：</h1><ul>  <li class="selected"><a href="javascript:goSort('Tarea',0);">全部</a> </li>  <li><a href="javascript:goSort('Tarea',1);">500平米以下</a>   </li>  <li><a href="javascript:goSort('Tarea',2);">500-1000平米</a>   </li>  <li><a href="javascript:goSort('Tarea',3);">1000-1500平米</a>   </li>  <li><a href="javascript:goSort('Tarea',8);">1500平米以上</a>   </li></ul></div><div class="search_area-text2" id="Tprice"><h1>租金：</h1><ul>  <li class="selected"><a href="javascript:goSort('Tprice',0);">全部</a> </li>  <li><a href="javascript:goSort('Tprice',1);">10元/平米以下</a>   </li>  <li><a href="javascript:goSort('Tprice',2);">10-15元/平米</a>   </li>  <li><a href="javascript:goSort('Tprice',3);">15-20元/平米</a>   </li>  <li><a href="javascript:goSort('Tprice',4);">20-25元/平米</a>   </li>  <li><a href="javascript:goSort('Tprice',5);">25元/平米以上</a>   </li></ul></div><div class="search_area-text2" id="Tfloor"><h1>樓層：</h1><ul>  <li class="selected"><a href="javascript:goSort('Tfloor',0);">全部</a> </li>  <li><a href="javascript:goSort('Tfloor',1);">一樓</a> </li>  <li><a href="javascript:goSort('Tfloor',2);">二樓以上</a>   </li>  </ul></div><div class="search_area-text2" id="Tstructure"><h1>結構：</h1><ul>  <li class="selected"><a href="javascript:goSort('Tstructure',0);">全部</a> </li>  <li><a href="javascript:goSort('Tstructure',1);">標準廠房</a>   </li>  <li><a href="javascript:goSort('Tstructure',2);">簡易廠房</a>   </li>  <li><a href="javascript:goSort('Tstructure',3);">鋼結構</a>   </li>  <li><a href="javascript:goSort('Tstructure',4);">其他</a>   </li></ul></div></div><div class="search_area-foot"></div></div><!--搜尋地區結束-->

然後在skin/default/sell.css裡，為此模組增加相應的css，如下：

/*For search nav*/.search_area-top{background:url(image/searcharea_top.jpg) no-repeat; height:16px;}.search_area-center{ border-left:1px solid #f4c0a7; border-right:1px solid #f4c0a7; background:#FFFFFF; padding-left:22px; line-height:20px;}.search_area-center2{ border-left:1px solid #f4c0a7; border-right:1px solid #f4c0a7; background:#FFFFFF; padding-left:30px; padding-right:20px;}.search_area-text{ overflow:hidden; height:100%; padding-top:5px; padding-bottom:5px;}.search_area-text h1{ color:#6a6a6a; font-weight:bold; float:left; font-size:12px; margin:0px; padding:0px;}.search_area-text ul{ margin:0; padding:0; list-style:none; float:left; overflow:hidden; height:100%; width:710px;}.search_area-text li{ list-style:none; color:#6a6a6a; float:left; width:50px; padding-left:8px; padding-right:5px; white-space:nowrap}.search_area-text li a{ list-style:none; color:#6a6a6a;}.search_area-text li a:hover{ list-style:none; color:#ed6b2e; font-weight:bold; text-decoration:underline;}.search_area-text li.selected{color:#ed6b2e; font-weight:bold;}.search_area-text li.selected a{color:#ed6b2e;}.search_area-text li.selected a:hover{color:#ed6b2e;}.search_area-textdown{ overflow:hidden; height:100%; width:705px; padding-top:5px; padding-bottom:3px; background:#fff7f5}.search_area-textdown ul{ margin:0; padding:0; list-style:none; float:left; overflow:hidden; height:100%;}.search_area-textdown li{ list-style:none; color:#ed8d61; text-decoration:underline; float:left; padding-left:10px; padding-right:10px;}.search_area-textdown li a{color:#ed8d61; text-decoration:underline;}.search_area-textdown li a:hover{color:#ed8d61; text-decoration:underline;}.search_area-textdown li.selected{color:#ed8d61; font-weight:bold;}.search_area-text2{ overflow:hidden; height:100%; padding-top:5px; padding-bottom:5px;}.search_area-text2 h1{ color:#6a6a6a; font-weight:bold; float:left; font-size:12px; margin:0px; padding:0px;}.search_area-text2 ul{ margin:0; padding:0; list-style:none; float:left; overflow:hidden; height:100%; width:710px;}.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}.search_area-text2 li a{ list-style:none; color:#6a6a6a;}.search_area-text2 li a:hover{ list-style:none; color:#ed6b2e; font-weight:bold; text-decoration:underline;}.search_area-text2 li.selected a{color:#ed6b2e; font-weight:bold;}.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代碼：

function getQueryString(){     var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g"));      if(result == null){         return "";     }     for(var i = 0; i < result.length; i++){         result[i] = result[i].substring(1);     }     return result;}function goSort(name,value){var string_array = getQueryString();var oldUrl = (document.URL.indexOf("index.php")==-1)?document.URL+"index.php":document.URL;var newUrl;if(string_array.length>0)//如果已經有篩選條件{var repeatField = false;for(var i=0;i<string_array.length;i++){if(!(string_array[i].indexOf(name)==-1)){repeatField = true;//如果有重複篩選條件，替換條件值newUrl = oldUrl.replace(string_array[i],name+"="+value);}}//如果沒有重複的篩選欄位if(repeatField == false){newUrl = oldUrl+"&"+name+"="+value;}}else{//如果還沒有篩選條件newUrl = oldUrl+"?"+name+"="+value;}//跳轉window.location = newUrl;}function setSelected(name,value){var all_li = $("#"+name).find("li");//清除所有li標籤的selected類all_li.each(function(){$(this).removeClass("selected");});//為選中的li增加selected類all_li.eq(value).addClass("selected");}$(document).ready(function(){var string_array = getQueryString();for(var i=0;i<string_array.length;i++){var tempArr = string_array[i].split("=");setSelected(tempArr[0],tempArr[1]);//設定選中的篩選條件}});

進入系統後台，在供應模組的模組設定裡增加幾個自訂欄位，欄位對應篩選模組的篩選條件：

因為我們是以get方式來提交篩選條件的，所以需要對sell/index.php做一些調整，把接收到的篩選參數加入到當前變數表中，

這樣當module/sell/index.inc.php調用相應的index.htm模板時，可以以變數的方式在頁面取到篩選條件的值，修改如下：

<?phpdefine('DT_REWRITE', true);require 'config.inc.php';require '../common.inc.php';extract($GET,EXTR_OVERWRITE);//篩選條件參數加入到當前變數列表require DT_ROOT.'/module/'.$module.'/index.inc.php';?>

接下來我們要做的就是根據篩選條件，重新整理頁面這一塊的內容就行了：

這一塊在template/default/sell/index.htm頁面裡是以標籤的方式來調用內容的：

<!--{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裡，就可以了,當然篩選條件還需要進行一些處理，這裡我寫死了，改成如下代碼：

{php $condition = "status=3";}{php $Tarea_array = array(1=>'czzmj<500',2=>'czzmj between 500 and 1000',3=>'czzmj between 1000 and 1500',4=>'czzmj>1500');}{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');}{php $Tfloor_array = array(1=>'floor=1',2=>'floor>=2');}{php $Tstructure_array = array(1=>'標準廠房',2=>'簡易廠房',3=>'鋼結構');}{if isset($Tzone)&&($Tzone!=0)}{php $condition.=" and areaid=$Tzone";}{/if}{if isset($Tarea)&&($Tarea!=0)}{php $condition.=" and $Tarea_array[$Tarea]";}{/if}{if isset($Tprice)&&($Tprice!=0)}{php $condition.=" and $Tprice_array[$Tprice]";}{/if}{if isset($Tfloor)&&($Tfloor!=0)}{php $condition.=" and $Tfloor_array[$Tfloor]";}{/if}{if isset($Tstructure)&&($Tstructure!=0)}{php $condition.=" and structure=$Tstructure";}{/if}<!--{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")}-->

這樣一個粗糙的篩選模組就製作好了。