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

          先看看完成后的效果圖:

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

          下面一步步來實現這樣的效果。
          首先我們把這個篩選模塊的html結構寫出來,如下:

          <!--搜索區域開始-->
          <div class="center">
          <div class="search_area-top"></div>
          <div class="search_area-center">
          <div id="Tzone" class="search_area-text">
          <h1>區域:</h1>
          <ul>
           	<li class="selected"><a>全部</a></li>
           	<li><a>桂林</a></li>
           	<li><a>上海</a></li>
           	<li><a>南寧</a></li>
          </ul>
          </div>
          <div id="Tarea" class="search_area-text2">
          <h1>面積:</h1>
          <ul>
           	<li class="selected"><a>全部</a></li>
           	<li><a>500平米以下</a></li>
           	<li><a>500-1000平米</a></li>
           	<li><a>1000-1500平米</a></li>
           	<li><a>1500平米以上</a></li>
          </ul>
          </div>
          <div id="Tprice" class="search_area-text2">
          <h1>租金:</h1>
          <ul>
           	<li class="selected"><a>全部</a></li>
           	<li><a>10元/平米以下</a></li>
           	<li><a>10-15元/平米</a></li>
           	<li><a>15-20元/平米</a></li>
           	<li><a>20-25元/平米</a></li>
           	<li><a>25元/平米以上</a></li>
          </ul>
          </div>
          <div id="Tfloor" class="search_area-text2">
          <h1>樓層:</h1>
          <ul>
           	<li class="selected"><a>全部</a></li>
           	<li><a>一樓</a></li>
           	<li><a>二樓以上</a></li>
          </ul>
          </div>
          <div id="Tstructure" class="search_area-text2">
          <h1>結構:</h1>
          <ul>
           	<li class="selected"><a>全部</a></li>
           	<li><a>標準廠房</a></li>
           	<li><a>簡易廠房</a></li>
           	<li><a>鋼結構</a></li>
           	<li><a>其他</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版本)
          下面添加控制的js代碼:

          function getQueryString(){
          var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g"));
          if(result == null){
          return "";
          }
          for(var i = 0; i &amp;lt; 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&amp;gt;0)//如果已經有篩選條件
          { var repeatField = false;
          for(var i=0;i&amp;lt;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&amp;lt;string_array.length;i++){
          var tempArr = string_array[i].split("=");
          setSelected(tempArr[0],tempArr[1]);//設置選中的篩選條件
          }
          });

          進入系統后臺,在供應模塊的模塊設置里增加幾個自定義字段,字段對應篩選模塊的篩選條件:

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

          因為我們是以get方式來提交篩選條件的,所以需要對sell/index.php做一些調整,把接收到的篩選參數加入到當前變量表中, 這樣當module/sell/index.inc.php調用相應的index.htm模板時,可以以變量的方式在頁面取到篩選條件的值,修改如下:

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

          接下來我們要做的就是根據篩選條件,刷新頁面這一塊的內容就行了:

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

          這一塊在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")}-->

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

          本博客所有文章如無特別注明均為原創

          如果覺得對你有幫助,可以通過下方打賞對作者表示鼓勵

          本文采用知識共享署名-非商業性使用-相同方式共享

          如若轉載,請注明出處:《Destoon供應模塊增加房產篩選功能》http://www.solariosolutions.com/949.html

          (2)
          打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
          鋒哥的頭像鋒哥管理員
          上一篇 2014年7月3日
          下一篇 2014年7月21日

          相關推薦

          發表回復

          登錄后才能評論
          国产厨房乱子伦露脸,XXXXAAA欧美,日本 888 XXXX,国产欧美日韩一区二区图片