织梦多条件筛选功能完成 dede联动搜索

发布时间：2021-12-13 15:03 所属栏目：19 来源：互联网

导读：用织梦实现筛选的功能，其实主要就是运用到了织梦的高级搜索功能，然后用ajax去post替换掉本来的结果就可以了。其实筛选的话，主要有两个问题需要解决，一个是前台的筛选实现，一个是后台根据前台的点击，反馈出相应的结果。于是在网上搜索了N多的资料了之

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

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

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

京东的图片如下

织梦多条件筛选功能实现

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

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

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

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

<!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>

（编辑：ASP站长网）