1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 织梦++高级搜索php 织梦多条件筛选功能实现(dede联动搜索) - DeDecms

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

时间:2023-08-09 10:15:44

相关推荐

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

织梦多条件筛选功能实现(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已经可以看到效果了,那么下面要做的就是在织梦里面,用织梦的东西往里面去套。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。