JAVA三级分类的使用

1.0 准备

1.创建好一个java文件

2.导入所需要的包(至少29个)

3.创建resources包并标记为资源根目录,配置好框架配置信息 web.xml

4.创建pojo包,编写实体类pojo 

5.创建mapper包,编写接口mapper 

6.编写实现类mapper.xml  

7.创建service包,编写service以及impl

8.编写测试类,看看数据能否正确查询出来

2.0 创建util工具类

普通的写法:

​​public class PuTong {
    public static List<AppCategory> doList(List<AppCategory> list) {
        List<AppCategory> newList = new ArrayList<>();
        for (AppCategory appCategory1 : list) {
            if (appCategory1.getParentId() != null && appCategory1.getParentId() == 1) {
                onChild(list, appCategory1);
                newList.add(appCategory1);
            }
        }
        return newList;
    }

    private static void onChild(List<AppCategory> list, AppCategory appCategory1) {
        for (AppCategory appCategory2 : list) {
            if (appCategory2.getParentId() != null && appCategory2.getParentId().intValue() == appCategory1.getId()) {
                onChild(list, appCategory2);
                appCategory1.getChildren().add(appCategory2);
            }
        }
    }
}

流的写法:

public class Liu {
    public static List<AppCategory> newList(List<AppCategory> list) {
        return list.stream()
                .filter(appCategory1 -> appCategory1.getParentId() != null && appCategory1.getParentId() == 1)
                .map(appCategory1 -> {
                    onChildStram(list, appCategory1);
                    return appCategory1;
                })
                .collect(Collectors.toList());
    }

    private static List<AppCategory> onChildStram(List<AppCategory> list, AppCategory appCategory1) {
        return list.stream()
                .filter(appCategory2 -> appCategory2.getParentId() != null && appCategory2.getParentId().intValue() == appCategory1.getId())
                .map(appCategory2 -> {
                    onChildStram(list, appCategory2);
                    appCategory1.getChildren().add(appCategory2);
                    return appCategory2;
                })
                .collect(Collectors.toList());
    }
}

3.0 在web创建一个测试页面

建立一个index.jsp,运行出来是这样的页面

<form action="list">
    <select name="appCategory1" id="appCategory1" class="myCategory" level="2"></select>
    <select name="appCategory2" id="appCategory2" class="myCategory" level="3"></select>
    <select name="appCategory3" id="appCategory3" class="myCategory"></select>
    <p>
        <input type="submit" value="查询"/>
    </p>
</form>
</body>

4.0 编写script

完整的script代码

<script>
    $(function () {
        var categoryList;//给下一次使用,不需要访问数据库
        $.getJSON("getCateList", "", function (data) {
            console.log(data);
            //保存数据
            categoryList = data;
            //根据数据产生下拉框数据
            createSelect(data, 1, true);

            if ("+${category1}+" != '') {//意味着我是回显的
                $("#category1").trigger("change");
            }
            if ("+${category2}+" != '') {//意味着我是回显的
                $("#category2").trigger("change");
            }
        })
        $(".myCategory").change(function (event) {
            var isTrigger = event.isTrigger;//是用户自己选择的 还是触发器触发的
            //获取你选中的id
            var selectId = $(this).val();
            //下一级是第几个
            var level = $(this).attr("level");
            //创建一个新的数组用来存储下拉框中需要显示的数据
            var newList = new Array();
            //根据你选择id,获取他的子类作为下拉框显示的数据
            queryCategoryList(categoryList, selectId, newList);
            //生成下一级别的下拉框
            createSelect(newList[0], level, isTrigger);
        });

        function queryCategoryList(data, selectId, newList) {
            $(data).each(function (i, item) {
                if (item.id == selectId) {
                    newList.push(item.children);
                } else {
                    if (item.children != null && item.children.length != 0) {
                        queryCategoryList(item.children, selectId, newList);
                    }
                }
            });
        }

        //给下拉框用指定的数据赋值
        function createSelect(data, id, isTrigger) {
            //一进去默认显示请选择
            if (id <= 3) {
                if (id <= 2) {
                    $("#category2").html("");
                    var options = "<option value=\"\">--请选择--</option>";
                    $("#category2").html(options);
                }
                $("#category3").html("");
                var options = "<option value=\"\">--请选择--</option>";
                $("#category3").html(options);
            }
            if (data) {
                $("#category" + id).html("");
                var options = "<option value=\"\">--请选择--</option>";
                for (var i = 0; i < data.length; i++) {
                    options += "<option value=\"" + data[i].id + "\">" + data[i].categoryName + "</option>";
                }
                $("#category" + id).html(options);
            }

            if (isTrigger) {
                $("#category1 option[value='" + ${category1} +"']").prop("selected", true);
                $("#category2 option[value='" + ${category2} +"']").prop("selected", true);
                $("#category3 option[value='" + ${category3} +"']").prop("selected", true);
            }
        }
    })
</script>

最后,service实现类的分类方法需要使用util工具类

显示查询回显的controller

  @RequestMapping("/list")
    public String list(String appCategory1, String appCategory2, String appCategory3, Model model) {
        model.addAttribute("appCategory1", appCategory1);
        model.addAttribute("appCategory2", appCategory2);
        model.addAttribute("appCategory3", appCategory3);
        return "index.jsp";
    }

效果图:

选择上一级分类之后下一级分类才会显示,查询的时候不会丢失选择的,也就是查询回显,当上一级分类被选中请选择的时候它之后的所有选项都会丢失