用织梦实现筛选的功能，其实主要就是运用到了织梦的高级搜索功能，然后用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里面写的。下面把几个文件打包了一下，有需要的同学可以下载了。

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

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

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

  1. 织梦CMS增加复制文档功能

    打开后台目录(/dede)下archives_do.php约430行下添加: /*----------------------------- //复制文档 ---------------------- ...

  2. 织梦cms PHPcms 帝国cms比较

    现在建网站不需要请程序员从基础的程序开发做起了,有专业的建站工具,CMS是使用最广泛的建站工具.CMS是Content Management System 现在建网站不需要请程序员从基础的程序开发做起 ...

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

    php才是建站的主流,cms这类程序又是用的最多的,占据主流的cms主要就是织梦,帝国,phpcms这三种的,这三个程序都是开源程序.国内用户众多.   一.从美观性来说(以官方默认模版为准   ph ...

  4. 织梦cms网上复制图片不可用的解决方法

    背景描述: 织梦cms采集图片集时, 需要使用织梦cms提供的"网上复制图片"的功能, 好像我这里这个功能一直不可用, 今天下定决心研究了下源代码并进行了适当修改, 将我的修改提供 ...

  5. 记一次织梦cms渗透测试

    记一次织梦cms渗透测试 0x01 前言 本次测试的整个流程:枚举用户名-针对性暴破-登录后台-后台编辑php文件getshell. 0x02 过程 1.登录功能模块存在用户名枚举缺陷,利用此权限先枚 ...

  6. 求解：php商品条件筛选功能你是怎么做出来的？

    求解:php商品条件筛选功能你是怎么做出来的? 2013-09-25 13:43 chenhang607 | 浏览 2756 次 资源共享 求思路或者方法,最好能有些代码 2013-09-25 14: ...

  7. 织梦CMS(dedecms)栏目属性及系统封面模板、列表模板、文章模板区别和路径设置解答

    问题一:(织梦"栏目管理"的"常规选项"中3个栏目属性分析?) 织梦CMS的栏目属性分成三种, -->最终列表栏目 -->频道封面 -->外部 ...

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

    最近做了一些视频教程传到优酷网站上,但我想引入这些视频教程到我的网站,在发表时我发现织梦CMS自带的编辑器又不直接支持优酷等视频网站的引用.所以为了方便教程的发布,特意在网站搜索到本篇教程,详细讲解如 ...

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

    "织梦"CMS注入高危漏洞情况 作者:    时间:2014-04-17   "织梦"CMS是由上海卓卓网络科技有限公司研发的一款网站建站系统软件,又称&quo ...

随机推荐

  1. linux RPM、YUM

    Linux 界的两大主流: RPM 与 DPKG distribution 代表 软件管理机制 使用指令 在线升级机制(指令) Red Hat/Fedora RPM rpm, rpmbuild YUM ...

  2. 用js将从后台得到的时间戳（毫秒数）转换为想要的日期格式

    得到后台从数据库中拿到的数据我们希望格式是 2016年10月25日 17时37分30秒 或者 2016/10/25 17:37:30 然而我们前台得到的却是一段数字(时间戳,毫秒数) 14773860 ...

  3. 网络-->监控-->单位换算

    The metric system In some cases when used to describe data transfer rates bits/bytes are calculated ...

  4. Oracle 分页原理

    oracle rownum 及分页处理的使用方法 在实际应用中我们经常碰到这样的问题,比如一张表比较大,我们只要其中的查看其中的前几条数据,或者对分页处理数据.在这些情况下我们都需要用到rownum. ...

  5. Android Studio线下版和线上版都使用正式签名脚本（保证keysore签名文件和项目在同级目录），不用再因为繁琐的发正式版而烦恼

    场景:调用微信等第三方应用时如果生成的版本不是正式签名的可能会调用失败,使用如下脚本不用再为繁琐的发正式签名版而烦恼 app项目中的build.gradle追加如下代码: //使用正式签名脚本(保证k ...

  6. oracle pl/sql split函数

    在软件开发过程中程序员经常会遇到字符串的拼接和拆分工作. 以java开发为例: 前台传入字符串拼接形式的一个JSON数据,如:"1001,1002,1003",这可能代表了一组序号 ...

  7. Unity 3D

    Assets(模型.贴图.脚本) Library(快捷方式.暂存文件) ProjectSettings(设置信息) Temp(临时文件) Generate Colliders(是否碰撞) Terrai ...

  8. aa5

    var placeList = [ {name:'海门', geoCoord:[121.15, 31.89]}, {name:'鄂尔多斯', geoCoord:[109.781327, 39.6082 ...

  9. .Net Framework运行机制

    首先谈谈.net framework的组成 主要是有两大部分组成:CLR(公共语言运行库)和FCL(Framework类库) CLR的主要功能:和Java虚拟机一样也是一个运行时环境,是一个可由多种编 ...

  10. Servlet下载文件和http响应

    下载文件等: 1.得到公共的内容ServletContext sc = this.getServletContext(); 2.在链接名字后面加个? 一个参数?参数1=值 两个参数?参数1=值& ...