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

最新推荐文章于 2020-05-21 14:14:55 发布
最新推荐文章于 2020-05-21 14:14:55 发布
阅读量5.3k 收藏 5
点赞数
分类专栏： destoon
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kylinbl/article/details/7774749
版权

先看看完成后的效果图：


下面一步步来实现这样的效果。

首先我们把这个筛选模块的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模板时，可以以变量的方式在页面取到筛选条件的值，修改如下：

<?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';
?>

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



这一块在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")}-->


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


KylinBL
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
destoon内核,爱家房产网V5.01商业版,房产门户首选,功能强大
03-30
爱家房产网源码,aijiacms源码,房产网源码,房产门户源码,二手房源码,爱家房产网V5.01商业版 演示地址：(以截图为准) 环境配置： PHP、MYsql 其他说明：爱家房产网V5.01商业版,destoon内核，功能强大，主要模块包括新闻、资讯、商铺、写字间、团购、二手房、出租、供求等，是一套非常强大的房产门户系统，某站vip资源，分享给大家。
destoon供应信息title调用出公司名称的方法
10-25
主要介绍了destoon供应信息title调用出公司名称的方法,非常具有实用价值的一个技巧,需要的朋友可以参考下
Destoon供应列表调用分类属性值调用实现方法
程序人生
05-21 751
有很多朋友在使用Destoon做开发的时候，对于供应模块分类不满足需求。需要加入独立的产品分类属性，下面小博分享下：Destoon供应列表调用分类属性值调用实现方法 1、找到模板在list-sell.htm中添加以下代码 <?php $a = $t[itemid]; $b = $db->get_one("select value from destoon_category_value where itemid='$a'"); echo $b[value]; ?> ...
destoon文章模块调用企业会员资料的方法
10-25
主要介绍了destoon文章模块调用企业会员资料的方法,非常实用的一个技巧,需要的朋友可以参考下
destoon扩展功能
12-31
对destoon系统做的一些二次开发，和文档
destoon设置自定义搜索的方法
12-19
第一步： 在include/global.fun.php中加入两个函数 函数一： function loseSpace($pcon){ $pcon = preg_replace("/ /","",$pcon); $pcon = preg_replace("/ /","",$pcon); $pcon = preg_replace("/　/","",$pcon); $pcon = preg_replace("/\r\n/","",$pcon); $pcon = str_replace(chr(13),"",$pcon); $pcon = str_replace(chr(10),"",$
Destoon模块自定义字段支持搜索的方法
程序人生
05-12 591
　　今天看了看Destoon模块自定义字段支持搜索的方法，试着加了个新字段glry，设置了值，然后去数据库moduleid的article表看，字段成功加上了。 　　 　　于是去template下article文件夹的list.htm和show.htm里调看看能不能调得到，结果无论是用{$t[glry]}还是{$glry}这样都调不出来，就奇怪了，模块的fileds都以 　　 　　字符串的方式存储在$MOD[fields]里，试着打印出来一看，竟然没有新加的glry字段在里面，难怪取不到了。网上查了下，原来
Destoon教程之系统标签调用大全 【持续更新】
程序人生
04-08 2294
Destoon教程之系统标签调用大全 【持续更新】： 求购：{$MODULE[6][linkurl]} 行情：{$MODULE[7][linkurl]} 公司：{$MODULE[4][linkurl]} 展会：{$MODULE[8][linkurl]} 资讯：{$MODULE[21][linkurl]} 招商：{$MODULE[22][linkurl]} 品牌：{$MODULE[13]...
Destoon分类属性筛选，自定义分类属性筛选搜索实现
程序人生
05-05 907
Destoon分类属性筛选，自定义分类属性筛选搜索实现 实际显示效果： Destoon分类属性筛选，自定义分类属性筛选搜索实现 实现方法： 1、以下以商城为例说明使用方法，进入商城管理 模块设置 分类属性参数 选择开启 Destoon分类属性筛选，自定义分类属性筛选搜索实现 2、进入分类管理 点击需要添加属性的分类属性对应的数字 Destoon分类属性筛选，自定义分类属性筛选搜...
destoon复制新模块的方法
10-25
主要介绍了destoon复制新模块的方法，可以在destoon的实际使用过程中根据情况建立一些系统没有的模块,需要的朋友可以参考下
destoon7.0蓝色电子行业门户DESTOON内核亲测可用
11-19
源网站：www.icabc.cn 演示：dt10.hb69.cn 。destoon7蓝色电子行业门户DESTOON内核亲测可用，导入前请批量替换dt10.hb69.cn为你的网址。 后台数据维护 - 数据恢复的版本已经放在模板文件中 路径：file/backup/中的文件是后台导入数据时使用的 已经将数据库文件导出在源码根目录，可以直接导入然后修改：config.inc.php数据库配置文件。
destoon-自定义模块.md
05-06
php框架 destoon，二开自定义模块的方法。 文档内分步骤教程，有整个自定义模块所需的操作讲解及示例。
destoon微信群发定制消息功能.zip
03-18
微信公众号消息群发功能，可根据用户需求定制消息群发功能。如：可定制某个地区某个类型的消息可定向定制；用户可定制多个地区以及删除定制的消息。
destoon全地区四级联动数据库.zip
10-11
destoon全地区四级数据库，替换里面数据表名后，可直接导入使用
DESTOON全站搜索AJAX结果分栏目+分页效果
08-06
DESTOON全站搜索AJAX结果分栏目+分页效果，亲自测试，已经用到了项目上。
destoon自定义自段的添加并让其支持搜索
KylinBL的专栏
03-21 5906
今天看了看模块设置里的自定义字段功能的用法，试着加了个新字段glry，设置了值，然后去数据库moduleid的article表看，字段成功加上了。 于是去template下article文件夹的list.htm和show.htm里调看看能不能调得到，结果无论是用{$t[glry]}还是{$glry}这样都调不出来，就奇怪了，模块的fileds都以 字符串的方式存储在$MOD[fields]里，
destoon评论数据库
最新发布
09-01
根据引用，destoon数据库表说明汇总中可能包含了destoon评论数据库的信息。据引用所述，初始化系统后，系统会自动连接数据库，并将数据库操作对象保存在$db中。因此，想要查询destoon评论数据库的详细信息，可以参考...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值