织梦++高级搜索php,织梦多条件筛选功能实现(dede联动搜索) - DeDecms

织梦多条件筛选功能实现(dede联动搜索)

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

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

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

京东的图片如下

首先我们先在后台自定义模型

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

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

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

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

织梦仿京东筛选

品牌：

全部

惠普(hp)

联想(Lenovo)

联想(ThinkPad)

宏基(acer)

华硕

戴尔

三星

索尼

东芝

Gateway

微星

海尔

清华同方

富士通

苹果(Apple)

神舟

方正

优雅

价格：

全部

1000-2999

3000-3499

3500-3999

4000-4499

4500-4999

5000-5999

6000-6999

7000-9999

10000以上

尺寸：

全部

8.9英寸及以下

11英寸

12英寸

13英寸

14英寸

15英寸

16英寸-17英寸

平台：

全部

AMD Brazos APU平台

Intel Sandy Bridge平台

Intel平台

AMD平台

显卡：

全部

独立显卡

集成显卡

核芯显卡

然后把面的代码复制进去,现在把filter.css以及flter.js也分别复制好.

@charset"gb2312";

/* CSS Document */

#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;

}

// 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");/*注意：这儿应该是设置(attr)样式，而不是添加样式(addClass)，

不然后面通过$("#filter a[class='seled']")访问不到class样式为seled的a标签。*/

//为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()); //返回选中结果

});

functionRetSelecteds() {

varresult ="";

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

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

});

returnresult;

}

如果步骤按照上面的步骤来操作的话这时候直接打开filter.htm已经可以看到效果了，那么下面要做的就是在织梦里面，用织梦的东西往里面去套。