織夢CMS實現多條件篩選功能

時間  2019-12-07
標籤 cms 實現 條件 篩選 功能 欄目 CMS 简体版
原文   原文鏈接

用織夢實現篩選的功能，其實主要就是運用到了織夢的高級搜索功能，而後用ajax去post替換掉原本的結果就能夠了。javascript

其實篩選的話，主要有兩個問題須要解決，一個是前臺的篩選實現，一個是後臺根據前臺的點擊，反饋出相應的結果。php

因而在網上搜索了N多的資料了以後，先實現前臺的功能，就是你點了以後會有一個篩選的效果出來，固然，也只是一個效果。具體能夠參照：jquery仿京東篩選效果。下面就一步一步用織夢來實現這樣的功能。css

首先咱們先在後臺自定義模型（自定義模型都不會的同窗，能夠直接去面壁思過了）html

看到參照網站的圖片，能夠發現商品的話，主要有下面的幾個字段：品牌，價格，尺寸，平臺，顯卡這五個字段。java

其中品牌、平臺、顯卡爲option類型，價格爲整數類型，尺寸爲小數類型，添加模型的時候，記得勾上「使字段能夠在列表的底層模板中得到(自定義字段默認僅能在文檔模板顯示，啓用此選項將使列表查詢變慢，如無必要請不要選擇)」jquery

下面根據咱們設置的這些字段，開始直接調用。假如咱們的模板目錄爲/templets/jingdong，那麼咱們開始在這個文件夾裏面新建三個文件，名稱分別爲filter.htm、filter.js、以及filter.css。ajax

filter.htm代碼sql

<!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>
<div><a>海爾</a></div>
</dd>
<dd>
<div><a>清華同方</a></div>
</dd>
<dd>
<div><a>富士通</a></div>
</dd>
<dd>
<div><a>蘋果(Apple)</a></div>
</dd>
<dd>
<div><a>神舟</a></div>
</dd>
<dd>
<div><a>方正</a></div>
</dd>
<dd>
<div><a>優雅</a></div>
</dd>
</dl>
<dl>
<dt>價格：</dt>
<dd>
<div><a>所有</a></div>
</dd>
<dd>
<div><a>1000-2999</a></div>
</dd>
<dd>
<div><a>3000-3499</a></div>
</dd>
<dd>
<div><a>3500-3999</a></div>
</dd>
<dd>
<div><a>4000-4499</a></div>
</dd>
<dd>
<div><a>4500-4999</a></div>
</dd>
<dd>
<div><a>5000-5999</a></div>
</dd>
<dd>
<div><a>6000-6999</a></div>
</dd>
<dd>
<div><a>7000-9999</a></div>
</dd>
<dd>
<div><a>10000以上</a></div>
</dd>
</dl>
<dl>
<dt>尺寸：</dt>
<dd>
<div><a>所有</a></div>
</dd>
<dd>
<div><a>8.9英寸及如下</a></div>
</dd>
<dd>
<div><a>11英寸</a></div>
</dd>
<dd>
<div><a>12英寸</a></div>
</dd>
<dd>
<div><a>13英寸</a></div>
</dd>
<dd>
<div><a>14英寸</a></div>
</dd>
<dd>
<div><a>15英寸</a></div>
</dd>
<dd>
<div><a>16英寸-17英寸</a></div>
</dd>
</dl>
<dl>
<dt>平臺：</dt>
<dd>
<div><a>所有</a></div>
</dd>
<dd>
<div><a>AMD Brazos APU平臺</a></div>
</dd>
<dd>
<div><a>Intel Sandy Bridge平臺</a></div>
</dd>
<dd>
<div><a>Intel平臺</a></div>
</dd>
<dd>
<div><a>AMD平臺</a></div>
</dd>
</dl>
<dl>
<dt>顯卡：</dt>
<dd>
<div><a>所有</a></div>
</dd>
<dd>
<div><a>獨立顯卡</a></div>
</dd>
<dd>
<div><a>集成顯卡</a></div>
</dd>
<dd>
<div><a>核芯顯卡</a></div>
</dd>
</dl>
</div>
</body>
</html>

接着昨天晚上的寫，昨天晚上說到了新建一個filter.htm，而後把上個文章的代碼複製進去，如今把filter.css以及flter.js也分別複製好。
filter.css代碼數據庫

@charset "gb2312";
#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;
}

JS代碼安全

// 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");
//爲filter下的全部a標籤添加單擊事件
$("#filter a").click(function () {
$(this).parents("dl").children("dd").each(function () {
//下面三種方式效果相同（第三種寫法的內部就是調用了find()函數，因此，第2、三種方法是等價的。）
//$(this).children("div").children("a").removeClass("seled");
//$(this).find("a").removeClass("seled");
$('a',this).removeClass("seled");
});
$(this).attr("class", "seled");
alert(RetSelecteds()); //返回選中結果
});
alert(RetSelecteds()); //返回選中結果
});
function RetSelecteds() {
var result = "";
$("#filter a[class='seled']").each(function () {
result += $(this).html()+"\n";
});
return result;
}
 

若是步驟按照織夢多條件篩選功能實現（一）和織夢多條件篩選功能實現（二）來操做的話這時候直接打開filter.htm已經能夠看到效果了，那麼下面要作的就是在織夢裏面，用織夢的東西往裏面去套。

咱們如今已經在欄目列表裏面添加了「仿京東」這個欄目了，這個欄目模型就是使用咱們在第一篇中講到的新建的模型。這個欄目的ID爲「1」。而後把這個欄目的列表模板設置爲咱們剛剛添加的那個filter.htm。如今咱們能夠去更新下「仿京東」這個欄目的文檔了。更新成功，瀏覽下，嗯，能夠訪問了。可是怎麼跟咱們剛剛製做的那個filter.htm如出一轍啊，那是由於咱們尚未在裏面添加織夢的模板標籤。如今就能夠隨便添加模板標籤了。

咱們實際是想直接調用出來咱們添加的那些字段。那應該如何操做呢？

這就得看看咱們添加的自定義字段在數據庫中的位置了，而後把他們給「弄」出來。嗯，這裏我弄出來的方式是採用自定義函數弄出來的。函數代碼以下，有須要的能夠直接拿去了，可是記住是放到織夢的/include/extend.func.php裏面啊，放其它位置出問題概不負責…

得到option類型數據的可取值

//得到全部自定義模型中的option類型能夠取得的值
function GetAllOption($option_name,$table="dede_jingdong")
{
global $dsql;
$sql="show columns from ".$table." like '".$option_name."'";
$dsql->SetQuery($sql);
$dsql->Execute();
while($row=$dsql->GetArray())
{
$enum=$row['Type'];
}
$enum_arr=explode("','",$enum);
$enum_arr[0]=str_replace("enum('","",$enum_arr[0]);//去掉分割後第一個元素的enum('
$enum_arr[count($enum_arr)-1]=str_replace("')","",$enum_arr[count($enum_arr)-1]);//去掉分割後最後一個元素的')
return $enum_arr;
}

好了，有這個函數就能夠將原本的filter.htm給簡化啦！

下面是簡化後的代碼

<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>
{dede:php}
$arr=GetAllOption("pinpai");
foreach($arr as $v)
{
echo "
<dd>
<div><a>$v</a></div>
</dd>
";
}
{/dede:php}
</dl>
<dl>
<dt>價格：</dt>
<dd>
<div><a>所有</a></div>
</dd>
<dd>
<div><a>1000-2999</a></div>
</dd>
<dd>
<div><a>3000-3499</a></div>
</dd>
<dd>
<div><a>3500-3999</a></div>
</dd>
<dd>
<div><a>4000-4499</a></div>
</dd>
<dd>
<div><a>4500-4999</a></div>
</dd>
<dd>
<div><a>5000-5999</a></div>
</dd>
<dd>
<div><a>6000-6999</a></div>
</dd>
<dd>
<div><a>7000-9999</a></div>
</dd>
<dd>
<div><a>10000以上</a></div>
</dd>
</dl>
<dl>
<dt>尺寸：</dt>
<dd>
<div><a>所有</a></div>
</dd>
<dd>
<div><a>8.9英寸及如下</a></div>
</dd>
<dd>
<div><a>11英寸</a></div>
</dd>
<dd>
<div><a>12英寸</a></div>
</dd>
<dd>
<div><a>13英寸</a></div>
</dd>
<dd>
<div><a>14英寸</a></div>
</dd>
<dd>
<div><a>15英寸</a></div>
</dd>
<dd>
<div><a>16英寸-17英寸</a></div>
</dd>
</dl>
<dl>
<dt>平臺：</dt>
<dd>
<div><a>所有</a></div>
</dd>
{dede:php}
$arr=GetAllOption("pingtai");
foreach($arr as $v)
{
echo "
<dd>
<div><a>$v</a></div>
</dd>
";
}
{/dede:php}
</dl>
<dl>
<dt>顯卡：</dt>
<dd>
<div><a>所有</a></div>
</dd>
{dede:php}
$arr=GetAllOption("xianka");
foreach($arr as $v)
{
echo "
<dd>
<div><a>$v</a></div>
</dd>
";
}
{/dede:php}
</dl>
</div>
</body>
</html>
 

織夢多條件篩選功能實現（四）

咱們已經在前臺實現了篩選的功能了，雖然價格、尺寸兩個類型沒有添加，這是由於我是要把他們固定作好，由於他們在模型中使用的類型是數字類型，並不是其餘三個（品牌、平臺以及顯卡）是option類型。

既然前臺已經作好了，那咱們就開始後臺的功能了。

具體的後臺我使用的是advancesearch.php這個搜索的功能來實現的。

咱們複製一個advancesearch.php的模板出來，默認的advanceserach.php的模板是/templets/default/advancesearch.htm，咱們把這個模板，複製到咱們的自定義的模板文件夾/templets/jingdong裏面，名字就叫作filter_tmp.htm。

而後進入後臺，在「內容模型管理」裏面選擇你所須要搜索的模型，而後點擊這個模型後面的放大鏡圖標，在「附件表可供自定義搜索的字段」中，勾選上你須要搜索的字段，自定義搜索結果模板頁，寫上咱們剛剛複製的模板名稱，叫作filter_tmp.htm，肯定。

這裏能夠測試一下，可否正常使用搜索。

不過好像是織夢繫統自帶的不能夠的，我試了好屢次都不行，追蹤了一下，好像並無查詢附加表，因而在advancesearch.php的218行，原來的代碼是

 

$query = "SELECT main.id AS aid,main.*,main.description AS description1, type.*
FROM $maintable main
LEFT JOIN #@__arctype type ON type.id = main.typeid
LEFT JOIN $addontable addon ON addon.aid = main.id
$where $orderby";

在type.*的後面添加行一個addon.*，也就是變成以下的代碼

 

$query = "SELECT main.id AS aid,main.*,main.description AS description1, type.*,addon.*
FROM $maintable main
LEFT JOIN #@__arctype type ON type.id = main.typeid
LEFT JOIN $addontable addon ON addon.aid = main.id
$where $orderby";
 

而後還有124行添加 ${$var}=iconv(「utf-8″,」gb2312″,${$var}); 不然會致使中文亂碼。

還有一個就是若是使用()英文括號的話，要當心了，由於會被安全sql過濾掉。

下面，是我簡單的製做了下filter_tmp.htm，你們能夠參考使用。

 

{dede:datalist}
<div>
<strong>標題：</strong>{dede:field.title/}<br />
<strong>品牌：</strong>{dede:field.pinpai/}<br />
<strong>價格：</strong>{dede:field.jiage/}<br />
<strong>尺寸：</strong>{dede:field.chicun/}<br />
<strong>平臺：</strong>{dede:field.pingtai/}<br />
<strong>顯卡：</strong>{dede:field.xianka/}<br />
</div>
{/dede:datalist}
{dede:pagelist listsize='5'/}

可是咱們最終是要把這個頁面「嵌」到filter.htm中，也就是最終的列表頁裏面。

如今咱們打開filter這個模板文件，在最下面加一個div，id設置爲result，這個是用來存放最後篩選出來的結果的地方。

而後打開filter.js，下面重點都是在這個js裏面寫的。下面把幾個文件打包了一下，有須要的同窗能夠下載了。

固然了，下載了出問題概不負責。。

看懂的總歸能夠看懂，看不懂的，說的在清楚也看不懂。。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程