fonction de filtrage de classification multi-niveaux php-tutoriel php-php.cn

fonction de filtrage de classification multi-niveaux php

不言

Libérer： 2023-03-29 15:18:02

original

5003 Les gens l'ont consulté

Cet article présente principalement la fonction de filtrage de classification multi-niveaux de PHP, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

fonction de filtrage de classification multi-niveaux php

<.> Accentuation : je voulais à l'origine écrire un filtre ajax, mais il y a eu quelques problèmes avec la pagination après l'allocation des données, j'en ai donc écrit un normal. En fait, cette fonction n'est pas très compliquée, c'est juste un processus de vérification de données, mais elle nécessite quand même une certaine connaissance du front-end.

Accédez d'abord au code back-end :

<?php
namespace Home\Controller;use Think\Controller;class IndexController extends Controller {
    public function index(){
        $goods = D(&#39;goods&#39;);        
        if(I(&#39;type&#39;)){            
        $type=I(&#39;type&#39;);            
        $type=explode(&#39;,&#39;,$type,-1);           
         $this->assign(&#39;res1&#39;,$type[0]);// 赋值数据集
            $this->assign(&#39;res2&#39;,$type[1]);// 赋值数据集
            if($type[0] ==&#39;不限&#39;){               
            $type[0]="";
            }            
            if($type[1] ==&#39;不限&#39;){                
            $type[1]="";
            }            
            $data[&#39;color&#39;]=array(&#39;like&#39;, "%$type[0]%");            
            $data[&#39;size&#39;]=array(&#39;like&#39;, "%$type[1]%");
        }        //分页
        $count = $goods->where($data)->count();// 查询满足要求的总记录数
        $Page = new \Think\Page($count,2);// 实例化分页类 传入总记录数和每页显示的记录数(25)
        $Page->setConfig(&#39;prev&#39;,&#39;上一页&#39;);        
        $Page->setConfig(&#39;next&#39;,&#39;下一页&#39;);        
        $show = $Page->show();// 分页显示输出
        $list = $goods->order(&#39;id asc&#39;)->where($data)->limit($Page->firstRow.&#39;,&#39;.$Page->listRows)->select();        
        $this->assign(&#39;list&#39;,$list);// 赋值数据集
        $this->assign(&#39;page&#39;,$show);// 赋值分页输出
        $this->display();
    }

}

Copier après la connexion

Code front-end :

<!doctype html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.css" rel="stylesheet">
    <style>
        .color span{            margin-left: 10px;            margin-bottom: 10px;        }
        .size span{            margin-left: 10px;        }
        .content p{            padding: 5px 10px;            border: 1px solid #9B410E;            margin-top: 10px;            background-color: #fff;        }
    </style></head><body>
    <p class="box" style="background-color:#cccccc63;width: 1200px;margin: 0 auto;">
        <p class="color" style="display: flex;">
            <span class="am-btn am-btn-danger">不限</span>
            <span class="am-btn am-btn-primary">红色</span>
            <span class="am-btn am-btn-primary">黄色</span>
            <span class="am-btn am-btn-primary">蓝色</span>
            <span class="am-btn am-btn-primary">绿色</span>
        </p>
        <p class="size" style="display: flex;">
            <span class="am-btn am-btn-danger">不限</span>
            <span class="am-btn am-btn-primary">大号</span>
            <span class="am-btn am-btn-primary">中号</span>
            <span class="am-btn am-btn-primary">小号</span>
        </p>

        <p class="content">
            <volist name="list" id="vo">
                <p>{$vo.title}</p>
            </volist>
        </p>

        <form action="__MODULE__/Index/index" method="get" class="sub">
            <input type="hidden" name="type" class="type"/>
        </form>
        <input type="hidden" name="res1" class="res1" value="{$res1}"/>
        <input type="hidden" name="res2" class="res2" value="{$res2}"/>
    </p>
    <p class="page" style="text-align: center">{$page}</p></body></html><script>
    $(document).ready(function(){
        $(".color span").each(function(){
            if ($(".res1").val() == $(this).text()) {
                $(this).addClass("am-btn-danger");
                $(this).removeClass("am-btn-primary");
                $(this).siblings().removeClass("am-btn-danger");
                $(this).siblings().addClass("am-btn-primary")
            }
        });
        $(".size span").each(function(){
            if ($(".res2").val() == $(this).text()) {
                $(this).addClass("am-btn-danger");
                $(this).removeClass("am-btn-primary");
                $(this).siblings().removeClass("am-btn-danger");
                $(this).siblings().addClass("am-btn-primary")
            }
        });
    });

    $(".color span").click(function () {
        $(this).removeClass("am-btn-primary");
        $(this).addClass("am-btn-danger");
        $(this).siblings().removeClass("am-btn-danger")
        $(this).siblings().addClass("am-btn-primary")
    })

    $(".size span").click(function () {
        $(this).removeClass("am-btn-primary");
        $(this).addClass("am-btn-danger");
        $(this).siblings().removeClass("am-btn-danger")
        $(this).siblings().addClass("am-btn-primary")
    })

    $("span").click(function () {
        var type = &#39;&#39;
        $("span").each(function(){
            if (($(this).attr("class").toString()) == "am-btn am-btn-danger") {
                type += $(this).text()+&#39;,&#39;;
            }
        });
        $(".type").val(type);
        $(".sub").submit();
    })</script>

Copier après la connexion

Remarque : la section front-end est transmise via un message caché formulaire, et une attention particulière doit être accordée à Soumettre via get.

Recommandations associées :

requête de classification php multi-niveaux

code de menu arborescent multi-niveaux php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!