织梦CMS实现多条件筛选功能

用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了。

其实筛选的话,主要有两个问题需要解决,一个是前台的筛选实现,一个是后台根据前台的点击,反馈出相应的结果。

于是在网上搜索了N多的资料了之后,先实现前台的功能,就是你点了之后会有一个筛选的效果出来,当然,也只是一个效果。具体可以参照:jquery仿京东筛选效果。下面就一步一步用织梦来实现这样的功能。

首先我们先在后台自定义模型(自定义模型都不会的同学,可以直接去面壁思过了)

看到参照网站的图片,可以发现商品的话,主要有下面的几个字段:品牌,价格,尺寸,平台,显卡这五个字段。

其中品牌、平台、显卡为option类型,价格为整数类型,尺寸为小数类型,添加模型的时候,记得勾上“使字段可以在列表的底层模板中获得(自定义字段默认仅能在文档模板显示,启用此选项将使列表查询变慢,如无必要请不要选择)”

下面根据我们设置的这些字段,开始直接调用。假如我们的模板目录为/templets/jingdong,那么我们开始在这个文件夹里面新建三个文件,名称分别为filter.htm、filter.js、以及filter.css。

filter.htm代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<link href="/templets/jingdong/filter.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

<script src="/templets/jingdong/filter.js" type="text/javascript"></script>

<title>织梦仿京东筛选</title>

</head>

<body>

<div id="filter">

<dl>

<dt>品牌:</dt>

<dd>

<div><a>全部</a></div>

</dd>

<dd>

<div><a>惠普(hp)</a></div>

</dd>

<dd>

<div><a>联想(Lenovo)</a></div>

</dd>

<dd>

<div><a>联想(ThinkPad)</a></div>

</dd>

<dd>

<div><a>宏基(acer)</a></div>

</dd>

<dd>

<div><a>华硕</a></div>

</dd>

<dd>

<div><a>戴尔</a></div>

</dd>

<dd>

<div><a>三星</a></div>

</dd>

<dd>

<div><a>索尼</a></div>

</dd>

<dd>

<div><a>东芝</a></div>

</dd>

<dd>

<div><a>Gateway</a></div>

</dd>

<dd>

<div><a>微星</a></div>

</dd>

<dd>

<div><a>海尔</a></div>

</dd>

<dd>

<div><a>清华同方</a></div>

</dd>

<dd>

<div><a>富士通</a></div>

</dd>

<dd>

<div><a>苹果(Apple)</a></div>

</dd>

<dd>

<div><a>神舟</a></div>

</dd>

<dd>

<div><a>方正</a></div>

</dd>

<dd>

<div><a>优雅</a></div>

</dd>

</dl>

<dl>

<dt>价格:</dt>

<dd>

<div><a>全部</a></div>

</dd>

<dd>

<div><a>1000-2999</a></div>

</dd>

<dd>

<div><a>3000-3499</a></div>

</dd>

<dd>

<div><a>3500-3999</a></div>

</dd>

<dd>

<div><a>4000-4499</a></div>

</dd>

<dd>

<div><a>4500-4999</a></div>

</dd>

<dd>

<div><a>5000-5999</a></div>

</dd>

<dd>

<div><a>6000-6999</a></div>

</dd>

<dd>

<div><a>7000-9999</a></div>

</dd>

<dd>

<div><a>10000以上</a></div>

</dd>

</dl>

<dl>

<dt>尺寸:</dt>

<dd>

<div><a>全部</a></div>

</dd>

<dd>

<div><a>8.9英寸及以下</a></div>

</dd>

<dd>

<div><a>11英寸</a></div>

</dd>

<dd>

<div><a>12英寸</a></div>

</dd>

<dd>

<div><a>13英寸</a></div>

</dd>

<dd>

<div><a>14英寸</a></div>

</dd>

<dd>

<div><a>15英寸</a></div>

</dd>

<dd>

<div><a>16英寸-17英寸</a></div>

</dd>

</dl>

<dl>

<dt>平台:</dt>

<dd>

<div><a>全部</a></div>

</dd>

<dd>

<div><a>AMD Brazos APU平台</a></div>

</dd>

<dd>

<div><a>Intel Sandy Bridge平台</a></div>

</dd>

<dd>

<div><a>Intel平台</a></div>

</dd>

<dd>

<div><a>AMD平台</a></div>

</dd>

</dl>

<dl>

<dt>显卡:</dt>

<dd>

<div><a>全部</a></div>

</dd>

<dd>

<div><a>独立显卡</a></div>

</dd>

<dd>

<div><a>集成显卡</a></div>

</dd>

<dd>

<div><a>核芯显卡</a></div>

</dd>

</dl>

</div>

</body>

</html>

接着昨天晚上的写,昨天晚上说到了新建一个filter.htm,然后把上个文章的代码复制进去,现在把filter.css以及flter.js也分别复制好。
filter.css代码

@charset "gb2312";

#filter {

width:620px;

height:auto;

margin-left:auto;

margin-right:auto;

font-size:12px;

}

#filter dl {

padding:0;

margin-top:0;

margin-bottom:0;

clear:both;

padding:4px 0;

}

#filter dt, dd {

display:block;

float:left;

width:auto;

padding:0;

margin:3px 0;

}

#filter dt {

height:14px;

padding-bottom:4px;

font-weight:bold;

color:#333333;

}

#filter dd {

color:#005AA0;

margin-right:8px;

}

#filter a {

cursor:pointer;

}

.seling {

background-color:#005AA0;

color:#FFFFFF;

}

.seled {

background-color:#005AA0;

color:#FFFFFF;

}

JS代码

// JavaScript Document

$(function () {

//选中filter下的所有a标签,为其添加hover方法,该方法有两个参数,分别是鼠标移上和移开所执行的函数。

$("#filter a").hover(

function () {

$(this).addClass("seling");

},

function () {

$(this).removeClass("seling");

}

);

//选中filter下所有的dt标签,并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)

$("#filter dt+dd a").attr("class", "seled");

//为filter下的所有a标签添加单击事件

$("#filter a").click(function () {

$(this).parents("dl").children("dd").each(function () {

//下面三种方式效果相同(第三种写法的内部就是调用了find()函数,所以,第二、三种方法是等价的。)

//$(this).children("div").children("a").removeClass("seled");

//$(this).find("a").removeClass("seled");

$(‘a‘,this).removeClass("seled");

});

$(this).attr("class", "seled");

alert(RetSelecteds()); //返回选中结果

});

alert(RetSelecteds()); //返回选中结果

});

function RetSelecteds() {

var result = "";

$("#filter a[class=‘seled‘]").each(function () {

result += $(this).html()+"\n";

});

return result;

}

如果步骤按照织梦多条件筛选功能实现(一)织梦多条件筛选功能实现(二)来操作的话这时候直接打开filter.htm已经可以看到效果了,那么下面要做的就是在织梦里面,用织梦的东西往里面去套。

我们现在已经在栏目列表里面添加了“仿京东”这个栏目了,这个栏目模型就是使用我们在第一篇中讲到的新建的模型。这个栏目的ID为“1”。然后把这个栏目的列表模板设置为我们刚刚添加的那个filter.htm。现在我们可以去更新下“仿京东”这个栏目的文档了。更新成功,浏览下,嗯,可以访问了。但是怎么跟我们刚刚制作的那个filter.htm一模一样啊,那是因为我们还没有在里面添加织梦的模板标签。现在就可以随便添加模板标签了。

我们实际是想直接调用出来我们添加的那些字段。那应该如何操作呢?

这就得看看我们添加的自定义字段在数据库中的位置了,然后把他们给“弄”出来。嗯,这里我弄出来的方式是采用自定义函数弄出来的。函数代码如下,有需要的可以直接拿去了,但是记住是放到织梦的/include/extend.func.php里面啊,放其它位置出问题概不负责…

获得option类型数据的可取值

//获得所有自定义模型中的option类型可以取得的值

function GetAllOption($option_name,$table="dede_jingdong")

{

global $dsql;

$sql="show columns from ".$table." like ‘".$option_name."‘";

$dsql->SetQuery($sql);

$dsql->Execute();

while($row=$dsql->GetArray())

{

$enum=$row[‘Type‘];

}

$enum_arr=explode("‘,‘",$enum);

$enum_arr[0]=str_replace("enum(‘","",$enum_arr[0]);//去掉分割后第一个元素的enum(‘

$enum_arr[count($enum_arr)-1]=str_replace("‘)","",$enum_arr[count($enum_arr)-1]);//去掉分割后最后一个元素的‘)

return $enum_arr;

}

好了,有这个函数就可以将本来的filter.htm给简化啦!

下面是简化后的代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<link href="/templets/jingdong/filter.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

<script src="/templets/jingdong/filter.js" type="text/javascript"></script>

<title>织梦仿京东筛选</title>

</head>

<body>

<div id="filter">

<dl>

<dt>品牌:</dt>

<dd>

<div><a>全部</a></div>

</dd>

{dede:php}

$arr=GetAllOption("pinpai");

foreach($arr as $v)

{

echo "

<dd>

<div><a>$v</a></div>

</dd>

";

}

{/dede:php}

</dl>

<dl>

<dt>价格:</dt>

<dd>

<div><a>全部</a></div>

</dd>

<dd>

<div><a>1000-2999</a></div>

</dd>

<dd>

<div><a>3000-3499</a></div>

</dd>

<dd>

<div><a>3500-3999</a></div>

</dd>

<dd>

<div><a>4000-4499</a></div>

</dd>

<dd>

<div><a>4500-4999</a></div>

</dd>

<dd>

<div><a>5000-5999</a></div>

</dd>

<dd>

<div><a>6000-6999</a></div>

</dd>

<dd>

<div><a>7000-9999</a></div>

</dd>

<dd>

<div><a>10000以上</a></div>

</dd>

</dl>

<dl>

<dt>尺寸:</dt>

<dd>

<div><a>全部</a></div>

</dd>

<dd>

<div><a>8.9英寸及以下</a></div>

</dd>

<dd>

<div><a>11英寸</a></div>

</dd>

<dd>

<div><a>12英寸</a></div>

</dd>

<dd>

<div><a>13英寸</a></div>

</dd>

<dd>

<div><a>14英寸</a></div>

</dd>

<dd>

<div><a>15英寸</a></div>

</dd>

<dd>

<div><a>16英寸-17英寸</a></div>

</dd>

</dl>

<dl>

<dt>平台:</dt>

<dd>

<div><a>全部</a></div>

</dd>

{dede:php}

$arr=GetAllOption("pingtai");

foreach($arr as $v)

{

echo "

<dd>

<div><a>$v</a></div>

</dd>

";

}

{/dede:php}

</dl>

<dl>

<dt>显卡:</dt>

<dd>

<div><a>全部</a></div>

</dd>

{dede:php}

$arr=GetAllOption("xianka");

foreach($arr as $v)

{

echo "

<dd>

<div><a>$v</a></div>

</dd>

";

}

{/dede:php}

</dl>

</div>

</body>

</html>

织梦多条件筛选功能实现(四)

我们已经在前台实现了筛选的功能了,虽然价格、尺寸两个类型没有添加,这是因为我是要把他们固定做好,因为他们在模型中使用的类型是数字类型,并非其他三个(品牌、平台以及显卡)是option类型。

既然前台已经做好了,那我们就开始后台的功能了。

具体的后台我使用的是advancesearch.php这个搜索的功能来实现的。

我们复制一个advancesearch.php的模板出来,默认的advanceserach.php的模板是/templets/default/advancesearch.htm,我们把这个模板,复制到我们的自定义的模板文件夹/templets/jingdong里面,名字就叫做filter_tmp.htm。

然后进入后台,在“内容模型管理”里面选择你所需要搜索的模型,然后点击这个模型后面的放大镜图标,在“附件表可供自定义搜索的字段”中,勾选上你需要搜索的字段,自定义搜索结果模板页,写上我们刚刚复制的模板名称,叫做filter_tmp.htm,确定。

这里可以测试一下,能否正常使用搜索。

不过好像是织梦系统自带的不可以的,我试了好多次都不行,追踪了一下,好像并没有查询附加表,于是在advancesearch.php的218行,原来的代码是

$query = "SELECT main.id AS aid,main.*,main.description AS description1, type.*

FROM $maintable main

LEFT JOIN #@__arctype type ON type.id = main.typeid

LEFT JOIN $addontable addon ON addon.aid = main.id

$where $orderby";

在type.*的后面添加行一个addon.*,也就是变成如下的代码

$query = "SELECT main.id AS aid,main.*,main.description AS description1, type.*,addon.*

FROM $maintable main

LEFT JOIN #@__arctype type ON type.id = main.typeid

LEFT JOIN $addontable addon ON addon.aid = main.id

$where $orderby";

然后还有124行添加 ${$var}=iconv(“utf-8″,”gb2312″,${$var}); 否则会导致中文乱码。

还有一个就是如果使用()英文括号的话,要小心了,因为会被安全sql过滤掉。

下面,是我简单的制作了下filter_tmp.htm,大家可以参考使用。

{dede:datalist}

<div>

<strong>标题:</strong>{dede:field.title/}<br />

<strong>品牌:</strong>{dede:field.pinpai/}<br />

<strong>价格:</strong>{dede:field.jiage/}<br />

<strong>尺寸:</strong>{dede:field.chicun/}<br />

<strong>平台:</strong>{dede:field.pingtai/}<br />

<strong>显卡:</strong>{dede:field.xianka/}<br />

</div>

{/dede:datalist}

{dede:pagelist listsize=‘5‘/}

但是我们最终是要把这个页面“嵌”到filter.htm中,也就是最终的列表页里面。

现在我们打开filter这个模板文件,在最下面加一个div,id设置为result,这个是用来存放最后筛选出来的结果的地方。

然后打开filter.js,下面重点都是在这个js里面写的。下面把几个文件打包了一下,有需要的同学可以下载了。

当然了,下载了出问题概不负责。。

看懂的总归可以看懂,看不懂的,说的在清楚也看不懂。。

时间: 2024-10-20 23:20:57

织梦CMS实现多条件筛选功能的相关文章

织梦cms PHPcms 帝国cms比较

现在建网站不需要请程序员从基础的程序开发做起了,有专业的建站工具,CMS是使用最广泛的建站工具.CMS是Content Management System 现在建网站不需要请程序员从基础的程序开发做起了,有专业的建站工具,CMS是使用最广泛的建站工具.CMS是Content Management System的缩写,意为"内容管理系统",建网站用CMS足够了,不论是企业网站.行业网站.还是门户网站,CMS都能满足其要求.用CMS建网站虽然不需要开发程序,但还是需要网站美工的基础,就是必

织梦cms、帝国cms、PHPcms优缺点解析

php才是建站的主流,cms这类程序又是用的最多的,占据主流的cms主要就是织梦,帝国,phpcms这三种的,这三个程序都是开源程序.国内用户众多. 一.从美观性来说(以官方默认模版为准 phpcms发布的V9美观性无疑是最好的.界面整洁大方.织梦一直以来都是一个绿色模版,中规中矩,帝国无疑是最难看的了,并且自己必须修改默认模板才能让首页显示数据,不能像织梦和phpsms那样自动调用,这个对于很多新手有点难度.不必过多解释. 二.从运行速度来说 帝国的操作生成速度应该是最快的,架构的原因吧,ph

九、搭建织梦cms网站

九.搭建织梦cms网站 1.介绍: 织梦内容管理系统(DedeCms) 以简单.实用.开源而闻名,是国内最知名的PHP开源网站管理系统,也是使用用户最多的PHP类CMS系统,在经历多年的发展,目前的版本无论在功能,还是在易用性方面,都有了长足的发展和进步,DedeCms免费版的主要目标用户锁定在个人站长,功能更专注于个人网站或中小型门户的构建,当然也不乏有企业用户和学校等在使用本系统. 优点: 1.易用:使用织梦你可以用十分钟学习它,十分钟搭建一个. 2.完善:织梦基本包含了一个常规网站需要的一

“织梦”CMS注入高危漏洞情况

"织梦"CMS注入高危漏洞情况 作者:    时间:2014-04-17   "织梦"CMS是由上海卓卓网络科技有限公司研发的一款网站建站系统软件,又称"DEDE内容管理系统",在国内应用较为广泛.2014年2月25日,该软件被披露存在一个高危漏洞,由于页面参数未进行严格过滤,存在SQL注入漏洞.受漏洞影响的织梦CMS 版本包括V 5.7 SP1及以下版本.至2月28日,针对该漏洞的攻击利用代码和相关利用工具在互联网上已经被公开传播.攻击者可利用

求解:php商品条件筛选功能你是怎么做出来的?

求解:php商品条件筛选功能你是怎么做出来的? 2013-09-25 13:43 chenhang607 | 浏览 2756 次 资源共享 求思路或者方法,最好能有些代码 2013-09-25 14:14 提问者采纳 php按条件筛选商品的功能,还是比较简单的.其实就是根据不同的条件组成SQL查询条件,从数据库里查出不同的商品出来.举个例子:用户可以按价格范围.按品牌.按商品名称这几项来综合查询.那么,在用户选择了上面这些查询条件后(可能这3个条件都设置了,也可能只设置了其中2个),提交到服务器

织梦CMS被挂马特征汇总

一.织梦CMS被挂马特征汇总 2013织梦CMS被挂马特征汇总.最近很多朋友反应后台多了几个系统管理员用户:service.spider等,而且自己之前的管理员用户登陆 时候会提示用户名不存在.还有朋友的织梦CMS网站里出现asdd.90sec.service等PHP格式的非DedeCMS源文件,这些木马文件内容 一般为: <?php eval($_POST[guige]);?>或者:<?php eval($_POST[fuwu]);?> 等等,被挂马后网站根目录下会生成一堆赌博网

DEDE织梦CMS留言簿模块中文无法保存的问题

出于个人爱好,最近一直研究PHP,顺便帮朋友解决网站问题接触到了织梦CMS,针对留言簿模块,出现中文无法保存,但也不报错的问题. 首先想到的肯定是字符集编码的问题,无奈对织梦不太了解,逐个排查输出变量问题,发现代码的问题所在. 文件目录:include/helpers/filter.helper.php,修改以下代码 文件中调用的htmlspecialchars函数,没有后边两个参数,加上之后,留言簿保存文件全部正常. 当然,第三个参数,看你的网站当前字符集编码是什么,按需修改.

让织梦CMS的后台编辑器支持优酷视频

最近做了一些视频教程传到优酷网站上,但我想引入这些视频教程到我的网站,在发表时我发现织梦CMS自带的编辑器又不直接支持优酷等视频网站的引用.所以为了方便教程的发布,特意在网站搜索到本篇教程,详细讲解如何在织梦CMS系统中加入例如优酷网站的教程,一共分为一下几个步骤来完成: 模型自定义字段的添加 优酷swf地址的添加 优酷引用代码的加入 一.实现方法 我们刚才说到,要实现这个效果,自带的编辑器不支持.那么我们就可以利用织梦(织梦模板)内容模型来进行实现,这里我们以默认的文章模型为基础来进行制作(如

织梦CMS如何修改中英文模板的当前位置

一些企业可能会有对外贸易,所以说可能需要做一个双语网站.对于双语网站有些企业可能会直接使用两个域名建立中文和英文两个独立网站,当然我们也可以使用一个域名建立一个双语网站.但是这个过程中我们会遇到这样那样的小问题.下面中名论坛小编为大家介绍一下如何修改中英文模板的当前位置. 在织梦CMS中,我们通过标签{dede:field name='position'/}来调用当前位置,栏目名称可以通过调用来实现,但是“主页”字样或者“Home”字样是自己进行设置的,我们希望够有一种方法自动根据中文或者英文进