TP5簡單實現相似京東淘寶多級商品篩選功能。

時間 2019-11-10

標籤 tp5 簡單實現相似京東淘寶多級商品篩選功能简体版

原文原文鏈接

前幾天作項目時，碰到個需求，商品多級分類篩選功能。以前從沒作過，查了很多資料，總算實現了。雖然實現的不夠優雅，但起碼能有效果，內心仍是很高興的。菜鳥有一顆成爲大神的心。在這裏分享給各位童鞋，歡迎大佬指導一下。
先說下原理:php實現多級篩選主要是利用a連接get傳參,把每一個標籤包含的參數經過a連接傳到後臺控制器,控制器接收參數後接着再把值賦回給模板，而且根據參數查詢對應數據輸出給前臺。實現起來也不難，講到這裏，感受剛開始本身徹底沒有思路的樣子真是該打,哈哈...
下面是前臺代碼示例:
<body>php

<div>
    <span>類型:</span>
    <!-- 0~4表明ID值 -->
    <a href="{:url('地址', ['category' => 0, 'mode' => $a, 'price'=>$c])}">所有</a>
    <a href="{:url('地址', ['category' => 1, 'mode' => $a, 'price'=>$c])}">官方新聞</a>
    <a href="{:url('地址', ['category' => 2, 'mode' => $a, 'price'=>$c])}">移動應用</a>
    <a href="{:url('地址', ['category' => 3, 'mode' => $a, 'price'=>$c])}">微信公衆號</a>
    <a href="{:url('地址', ['category' => 4, 'mode' => $a, 'price'=>$c])}">Android開發</a>

    <span>模式:
    <a href="{:url('地址', ['category' => $b, 'mode' => '0', 'price'=>$c])}">所有</a>
    <a href="{:url('地址', ['category' => $b, 'mode' => '1', 'price'=>$c])}">模式1</a>
    <a href="{:url('地址', ['category' => $b, 'mode' => '2', 'price'=>$c])}">模式2</a>
    <a href="{:url('地址', ['category' => $b, 'mode' => '3', 'price'=>$c])}">模式3</a>
    <a href="{:url('地址', ['category' => $b, 'mode' => '4', 'price'=>$c])}">模式4</a>
    <a href="{:url('地址', ['category' => $b, 'mode' => '5', 'price'=>$c])}">模式5</a>
    <a href="{:url('地址', ['category' => $b, 'mode' => '6', 'price'=>$c])}">模式6</a>

    <span>預算價格:
    <a href="{:url('地址', ['category' => $b, 'mode' => $a, 'price'=>'0'])}">所有</a>
    <a href="{:url('地址', ['category' => $b, 'mode' => $a, 'price'=>'1'])}">600如下</a>
    <a href="{:url('地址', ['category' => $b, 'mode' => $a, 'price'=>'600'])}">600-1000</a>
    <a href="{:url('地址', ['category' => $b, 'mode' => $a, 'price'=>'1000'])}">1000-5000</a>
    <a href="{:url('地址', ['category' => $b, 'mode' => $a, 'price'=>'5000'])}">5000以上</a>
</div>

</body>微信

這段代碼你們確定都能看懂，我再囉嗦一下，好比當用戶第一下點擊類型裏面的所有的時候,便會把category字段爲0傳到後臺。後臺接收判斷並把值再賦回給前臺，若是category字段值爲0,則查詢所有的分類數據。若是用戶第二下點擊模式裏面的所有，那此時由於category的值是由後臺賦值過來的因此爲0，mode爲0。若是第三下點擊價格裏的所有，則三個標籤值所有爲0。此時後臺判斷條件，若是所有爲0，則所有查詢，模板遍歷顯示。觸類旁通，其餘標籤也是同樣。實際操做中，確定不會把值一個一個寫在標籤裏這麼傻，只要用volist遍歷出來取值就能夠了。你們都懂得哈。
由於是多級篩選，因此where方法條件確定不止一個，因此要拼接where方法的值，我是個TPer,用TP5的方法舉例:
$b = input('category');//接收的分類id
$a = input('mode'); //接收的模式id
$c = input('price'); //接收的價格範圍值
$where = ['category'=>$category,'mode'=>$mode,'price'=>$price];//拼接where條件
$data = model('表名')->where($where)->select(); //查詢數據
return $this->fetch('',[
'data'=>$data,
'c'=>$c,
'b'=>$b,
'a'=>$a
]); //模板賦值fetch

固然，實際的狀況確定要設條件判斷三個值的數據的，根據值的狀況設定where條件。例如:this

if ($a == 0 && $b == 0 && $c == 0) {//條件所有爲空,即顯示全部
        $where = '';
    } elseif ($a == 0 && $b != 0 && $c != 0) {//模式爲所有範圍，分類和價格單獨指定。
        $where = ['b'=>$b,'c'=>$c];
    }

由於個人代碼寫的比較冗餘，就不獻醜了哈...
最後實現的效果是這樣:
url