织梦++高级搜索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已经可以看到效果了,那么下面要做的就是在织梦里面,用织梦的东西往里面去套。
织梦++高级搜索php,织梦多条件筛选功能实现(dede联动搜索) - DeDecms相关推荐
- antd table动态表头_使用 antd@4 table 自定义筛选表头功能做一个联动搜索表头筛选...
前言: 上篇文章是使用 antd@4 table 自定义表头筛选完成一个表格动态列的功能,这次需要完成一个表头联动条件筛选功能. 一.开始前 开始之前先去 Antd 官网看下「自定义的列筛选功能」的代 ...
- 5条件筛选功能_一分钟,彻底学会Excel高级筛选,坐等升职加薪!
Excel中高级筛选是普通筛选的加强,能够实现更加复杂的筛选功能.请您看下面的示例图: 数据示例图 如果要求筛选出班级为2班且语文成绩大于100分的数据,那么使用普通筛选连续筛选两次就可以得到结果.请 ...
- Elasticsearch实现商品搜索(关键字查询 条件筛选 规格过滤 价格区间搜索 分页查询 排序查询 高亮查询)
Elasticsearch实现商品搜索 商品搜索 1.根据关键字查询 2.条件筛选 2.1 品牌筛选 2.1.1 需求分析 2.1.2 代码实现 2.2 规格过滤 2.2.1 需求分析 2.2.2 代 ...
- PHP实现列表页综合筛选功能,dede织梦列表页联动筛选方法功能的实现
[DEDECMS.织梦开源程序已经成为市场上主流仿站开源代码,它能够非常快速的放置一个已经建立好的网站,但是前提是这些网站比较简单,没有一些复杂的功能,那么使用DEDECMS仿站是最快速,最有效的.而 ...
- 织梦cms是什么-织梦CMS免费搭建工具只需要输入域名
织梦cms是什么?织梦cms是一个内容管理系统,用于网站建设,那我们怎么快速搭建织梦cms网站,只需要输入域名选中主题(内置10W套海织梦cms模板),一个网站就搭建成了.还有大量的免费织梦cms插件 ...
- 织梦插件-织梦插件大全-免费织梦插件大全
织梦插件多吗?谁有织梦全套插件,织梦cms是一个独立的网站程序.今天给大家推荐的是织梦模板(内置5W套织梦cms织梦模板)以及免费织梦插件大全其中包括有:织梦cms采集插件.织梦cms伪原创插件.织梦 ...
- 织梦主动提交_织梦CMS网站如何自动提交百度快速收录(详细教程)
前不久,站长们发现百度搜索资源平台把链接提交"的功能改为"普通收录",同时新增了"快速收录"的功能.普通收录,我相信很多站长们都知道怎么去提交,但是快 ...
- 织梦DedeCMS列表页多条件联动筛选功能(移动端列表页使用电脑端模板问题解决)
原文:http://www.dedejs.com/html/article-571-1.html点击打开链接 备注:按此文可以解决,但手机列表页会出问题.列表页移动端调用的还是电脑端模板. 此问题本人 ...
- php织梦二次开发的功能例子,织梦DedeCMS二次开发联动筛选功能的实现(含多选功能)...
织梦默认的列表页没有筛选功能,但有时候我们做产品列表页的时候,产品的字段比较多,很多人都需要用到筛选功能,这样可以让用户更方便的找到自己所需要的东西,实现这个联动筛选功能需要对织梦进行二次开发,下面就 ...
最新文章
- DOS命令大全(经典收藏)
- 整合 Google 开源 C++ 代码
- 【PAT乙级】1061 判断题 (15 分)
- PowerDesigner16中的对象无效,不允许有扩展属性 问题的解决
- shell脚本传可选参数 getopts 和 getopt的方法
- 包包的结构制图_15种常见领型的结构制图
- MySQL 高级 —— 索引实现的思考
- Python使用pyzabbix调用Zabbix API
- c并非所有的代码路径都返回值_两行C语言代码播放音乐,就这么so easy!你学到了吗?...
- Mysql多表关联查询
- vue脚手架搭建项目的兼容性配置
- hive Beeline plus HiveServer2简单使用
- Linux 防火墙配置
- Python翻译Excel文件
- ReportMachine报表控件唯一官方论坛 - http://rmachine.5d6d.com/
- 【公式识别神器】Mathpix Snip 安装及其使用教程
- epsonl360打印机连接电脑_epsonl360打印机脱机如何解决
- 音视频开发技术,让智能家居更智能!
- PHP程序员必看书籍
- 【专家视点】公域流量的尽头:数字营销回归商业本质(20页精品PPT下载)
热门文章
- CEYE平台使用简介
- 【优化求解】基于遗传算法优化PARSEC 方法的翼型形状附matlab代码
- 【程序设计】浅拷贝与深拷贝
- 开发票服务器返回信息为空,使用 getinvoicebatch 批量接口获取发票信息,返回成功,但数据是空的...
- SpringMVC 用对象接收 ajax提交form表单
- 什么是PCB加工中树脂塞孔工艺?
- 服务器虚拟机如何连接显示器,Windows 10:如何在VMware虚拟机上使用双显示器
- 如果房贷被拒了怎么办?
- CSS代码常用代码以及前端图片代码
- 从WebService到面向服务架构SOA理解【二】