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

先看看完成后的效果图:

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

下面一步步来实现这样的效果。
首先我们把这个筛选模块的html结构写出来,如下:
[code lang=”html”]

[/code]

然后在skin/default/sell.css里,为此模块增加相应的css,如下:
[code lang=”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;}[/code]

下一步,为此模块增加javascript代码来进行控制,如下:
(这里使用到了jquery,所以需要在template/default/sell/index.htm 页里先引入jquery 1.7版本;
)
下面添加控制的js代码:
[code lang=”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]);//设置选中的筛选条件
}
});[/code]
进入系统后台,在供应模块的模块设置里增加几个自定义字段,字段对应筛选模块的筛选条件:

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

因为我们是以get方式来提交筛选条件的,所以需要对sell/index.php做一些调整,把接收到的筛选参数加入到当前变量表中, 这样当module/sell/index.inc.php调用相应的index.htm模板时,可以以变量的方式在页面取到筛选条件的值,修改如下:

[code lang=”php”] <?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’;
?>[/code]

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

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

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

[code lang=”php”] <!–{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")}–>[/code]

所以我们只要把筛选条件拼接到condition里,就可以了,当然筛选条件还需要进行一些处理,这里我写死了,改成如下代码:

[code lang=”php”]{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")}–>[/code]

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

本博客所有文章如无特别注明均为原创

如果觉得对你有帮助,可以通过下方打赏对作者表示鼓励

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

如若转载,请注明出处:https://www.fangsi.net/949.html

(2)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2014年7月3日 12:16
下一篇 2014年7月21日 09:53

相关推荐

发表评论

登录后才能评论