thinkPHP6商品分类列表 三级联动 前后端代码

后端代码：

#商品分类  一级列表信息  通过模板循环出来    
public function goodsCreate(){
        $cateInfo = Category::getCateInfo();
        $cate = handleParentsData($cateInfo,0);
        $this->cateInfo = $cate;
        $brand = Brand::getBrandInfo();
        View::assign(['brand'=>$brand,'cate'=>$cate,'errors'=>'']);
        return View::fetch('goods_create');
    }
#商品分类二级列表  Ajax发送请求  append  通过jQuery循环DOM元素到前端页面  增强用户体验
public function getCateTwoInfo(){
        $id_one = \request()->all('id_one');
        $cate_two = [];
        $cate = Category::getCateInfo();
        $cate = handleParentsData($cate);
        foreach($cate as $key=>$value){
            if ($value['id'] == $id_one){
                foreach($value['children'] as $k =>$v){
                    $cate_two[] = [
                        'id'=>$v['id'],
                        'pid'=>$v['pid'],
                        'cate_name'=>$v['cate_name'],
                    ];
                }
            }
        }
        return json([
           'code'=>200,
           'msg'=>'查询成功',
           'data'=>$cate_two
        ]);
    }
#三级分类列表  发送Ajax请求  通过jquery  append循环DOM元素 
public function getCateThreeInfo(){
        $id_one = \request()->all('id_one');
        $id_two = \request()->all('id_two');
        $cate_three = [];
        $cate = Category::getCateInfo();
        $cate = handleParentsData($cate);
        foreach($cate as $key=>$value){
            if ($value['id'] == $id_one){
                foreach($value['children'] as $k=>$v){
                    if ($v['id'] == $id_two){
                        foreach($v['children'] as $item => $ele){
                            $cate_three[] = [
                              'id'=>$ele['id'],
                              'pid'=>$ele['pid'],
                              'cate_name'=>$ele['cate_name'],
                            ];
                        }
                    }
                }
            }
        }
        return json([
            'code'=>200,
            'msg'=>'查询成功',
            'data'=>$cate_three
        ]);
    }

封装的递归数据处理方法：

<?php
// 应用公共文件
#封装父子结构数据处理方法
if (!function_exists('handleParentsData')){
    function handleParentsData($data,$pid = 0){
        $newData = [];
        foreach($data as $key=>$value){
            if ($value['pid'] == $pid){
                $newData[$key] = $value;
                $newData[$key]['children'] =  handleParentsData($data,$value['id']);
            }
        }
        return $newData;
    }
}

 

二级和三级列表，可以通过一个方法来实现  具体优化 慢慢做   处理无限级分类  也就是递归数组  处理后的数据  可以缓存一下  节约资源

路由代码：

use think\facade\Route;

Route::get('get_cate_two_info','Home/getCateTwoInfo');
Route::get('get_cate_three_info','Home/getCateThreeInfo');

前端代码：

    <div class="form-group" id="cate">
        <label> 商品分类 </label>
        <select id="cate_one" class="form-control">
            <option value=""></option>
            {volist name='cate' id='vo'}
            <option value="{$vo.id}">{$vo.cate_name}</option>
            {/volist}
        </select>
        <select  id="cate_two" class="form-control">
        </select>
        <select  id="cate_three" class="form-control" name="goods_cate">
        </select>
    </div>

前端使用的JavaScript代码：

<script>
    $(document).ready(function () {
        $('#cate_two').hide();
        $('#cate_three').hide();
    })
    var id_one = '';
    $('#cate_one').change(function () {
        id_one = $('#cate_one').val();
        $('#cate_two option').remove();
        $.ajax({
            url:"http://www.day12.com/get_cate_two_info?id_one="+id_one,
            dataType:"json",
            success:function (res) {
                console.log(res);
                if (res.code == 200){
                    $('#cate_two').show();
                    var str = '';
                    str += "<option value=''></option>";
                    for (var i=0;i<res.data.length;i++){
                        str += "<option value='"+res.data[i]['id']+"'>"+res.data[i]['cate_name']+"</option>";
                    }
                    $('#cate_two').append(str)
                }else{
                    alert('三级联动列表二级查询失败');
                }
            }

        })
    })
    $('#cate_two').change(function () {
        var id_two = $(this).val();
        $('#cate_three option').remove();
        $.ajax({
            url: "http://www.day12.com/get_cate_three_info?id_two="+id_two+'&id_one='+id_one,
            dataType: "json",
            success:function (res) {
                console.log(res.data);
                if (res.code == 200){
                    $('#cate_three').show();
                    var str = '';
                    for (var i=0;i<res.data.length;i++){
                        str += "<option value='"+res.data[i]['id']+"'>"+res.data[i]['cate_name']+"</option>";
                    }
                    $('#cate_three').append(str)
                }else{
                    alert('三级联动列表三级查询失败');
                }
            }
        })

    })
    $('#cate_three').change(function () {
        var id_three = $(this).val();
        console.log(id_three);
    })
</script>