三级联动+Lavarel

Posted on 2022-03-12 12:41  君子不卿  阅读(36)  评论(0编辑  收藏  举报

1、前端HTML代码

<div class="layui-form-item">
                <label for="level1" class="layui-form-label">
                    <span class="x-red">*</span>商品分类</label>
                <div class="layui-input-inline">
                    <select id="level1" name="level1" class="valid" lay-filter="level1"  lay-verify="required">
                        <option value="0">请选择</option>
                        @foreach($level1 as $v)
                        <option value="{{$v->id}}">{{$v->cate_name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select id="level2" name="level2" class="valid" lay-filter="level2" >

                    </select>
                </div>
                <div class="layui-input-inline" id="le3" >
                    <select id="level3" name="cate_id" class="valid">
                    </select>
                </div>
            </div>

2、前端js代码

function changeCate(args1,args2){
                form.on('select('+args1+')',function (data) {
                    // 获取一级分类id
                    var id = data.value;
                    if(id == 0){
                        $("#"+args2).html("");
                        form.render();
                        return false;
                    }
                    // 根据一级分类id 查询二级分类
                    $.get("{{url('goods/getSon')}}",{id:id},function (data) {
                        console.log(data);
                        if (data.code == 1){
                            console.log("我没有子类啊")
                        //    隐藏三级就好
                            $("#le3").hide();
                        }else {
                            $("#le3").show();
                            var str = "<option value='0'>请选择</option>";
                            for(var i=0;i<data.sons.length;i++){
                                str += "<option value='"+data.sons[i].id+"'>"+data.sons[i].cate_name+"</option>";
                            }
                            $("#"+args2).html(str);
                            form.render();
                        }

                    },"json");
                });
            }
            changeCate('level1','level2');
            changeCate('level2','level3');

3、后台PHP代码

  public function add()
    {
        $level1 = DB::table("category")->where('pid', 0)->orderBy('id', 'desc')->get();
        $data = compact("level1");
        return view('admin/goods/add', $data);
    }
    // 获取二级分类
    public function getSon()
    {
        $id = request()->input("id");// 1级分类 id
        $sons = DB::table('category')->where(['pid' => $id])->get()->toArray();
//        dump($sons);
        if (!$sons){
            $code = 1;
            $data = compact("code");
        }else{
            $code = 0;
            $data = compact('sons',"code");
        }
        return response()->json($data);
    }

附加:添加请求和处理

//监听提交
            form.on('submit(add)', function(data) {
                if(data.field.goods_pic_path == ""){
                    layer.msg("图片未上传",{icon:5})
                    return false;
                }
                if(data.field.level1 == "0"){
                    layer.msg("一级分类未填写")
                    return false;
                }
                if(data.field.level2 == "0"){
                    layer.msg("二级分类未填写")
                    return false;
                }
                if(data.field.cate_id == "0"){
                    layer.msg("三级分类未填写")
                    return false;
                }
                data.field._token = "{{csrf_token()}}";
                $.post("{{url("goods/addAction")}}",data.field,function (data){
                    if (data.code == 0){
                        layer.msg("增加成功", {icon: 6,time:1000},
                            function() {
                                //关闭当前frame
                                xadmin.close();
                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            });
                    }else{
                        layer.msg("增加失败", {icon: 2,time:1000});
                    }
                },"json")
                return false;
        });

addAction

 public function addAction(Request $request)
    {
//        dump($request->all());
        $data["goods_name"] = $request->input('goods_name');
        $data["goods_price"] = $request->input('goods_price');
        $data["goods_num"] = $request->input('goods_num');
        $data["goods_desc"] = $request->input('goods_desc');
        $data["goods_pic_path"] = $request->input('goods_pic_path');
        $data["created_at"] = date("Y-m-d H:i:s");
        $data["cate_id"] = $request->input("cate_id")??$request->input('level2');
//        dd($date);
        $rows = DB::table('goods')->insertGetId($data);
//        dump($rows);
        if ($rows) {
            //插入成功
            $data['code'] = 0;
        } else {
            //插入失败
            $data['code'] = 1;
        }
        return response()->json($data);
    }

 

Copyright © 2025 君子不卿
Powered by .NET 9.0 on Kubernetes

//评论