织梦多条件筛选功能实现(dede联动搜索)
用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了。
其实筛选的话,主要有两个问题需要解决,一个是前台的筛选实现,一个是后台根据前台的点击,反馈出相应的结果。
于是在网上搜索了N多的资料了之后,先实现前台的功能,就是你点了之后会有一个筛选的效果出来,当然,也只是一个效果。具体可以参照:jquery仿京东筛选效果。下面就一步一步用织梦来实现这样的功能。
京东的图片如下
首先我们先在后台自定义模型
看到参照网站的图片,可以发现商品的话,主要有下面的几个字段:品牌,价格,尺寸,平台,显卡这五个字段。
其中品牌、平台、显卡为option类型,价格为整数类型,尺寸为小数类型,添加模型的时候,记得勾上“使字段可以在列表的底层模板中获得(自定义字段默认仅能在文档模板显示,启用此选项将使列表查询变慢,如无必要请不要选择)”
下面根据我们设置的这些字段,开始直接调用。假如我们的模板目录为/templets/jingdong,那么我们开始在这个文件夹里面新建三个文件,名称分别为filter.htm、filter.js、以及filter.css。
HTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">
织梦仿京东筛选品牌:全部惠普(hp)联想(Lenovo)联想(ThinkPad)宏基(acer)华硕戴尔三星索尼东芝Gateway微星海尔清华同方富士通苹果(Apple)神舟方正优雅价格:全部1000-29993000-34993500-39994000-44994500-49995000-59996000-69997000-999910000以上尺寸:全部8.9英寸及以下11英寸12英寸13英寸14英寸15英寸16英寸-17英寸平台:全部AMDBrazosAPU平台IntelSandyBridge平台Intel平台AMD平台显卡:全部独立显卡集成显卡核芯显卡
然后把面的代码复制进去,现在把filter.css以及flter.js也分别复制好.
@charset"gb2312";
/*CSSDocument*/
#filter{
width:620px;
height:auto;
margin-left:auto;
margin-right:auto;
font-size:12px;
}
#filterdl{
padding:0;
margin-top:0;
margin-bottom:0;
clear:both;
padding:4px0;
}
#filterdt,dd{
display:block;
float:left;
width:auto;
padding:0;
margin:3px0;
}
#filterdt{
height:14px;
padding-bottom:4px;
font-weight:bold;
color:#333333;
}
#filterdd{
color:#005AA0;
margin-right:8px;
}
#filtera{
cursor:pointer;
}
.seling{
background-color:#005AA0;
color:#FFFFFF;
}
.seled{
background-color:#005AA0;
color:#FFFFFF;
}
//JavaScriptDocument
$(function(){
//选中filter下的所有a标签,为其添加hover方法,该方法有两个参数,分别是鼠标移上和移开所执行的函数。
$("#filtera").hover(
function(){
$(this).addClass("seling");
},
function(){
$(this).removeClass("seling");
}
);
//选中filter下所有的dt标签,并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)
$("#filterdt+dda").attr("class","seled");/*注意:这儿应该是设置(attr)样式,而不是添加样式(addClass),
不然后面通过$("#filtera[class='seled']")访问不到class样式为seled的a标签。*/
//为filter下的所有a标签添加单击事件
$("#filtera").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="";
$("#filtera[class='seled']").each(function(){
result+=$(this).html()+"\n";
});
returnresult;
}
如果步骤按照上面的步骤来操作的话这时候直接打开filter.htm已经可以看到效果了,那么下面要做的就是在织梦里面,用织梦的东西往里面去套。