记第一次实现JS+SSM+HTML的无限级树形结构菜单的页面显示功能

对于使用js+html+ssm创建树形菜单的记录

通过创建树形菜单对js和Java的使用进一步加深自己对其知识和基本用法的理解。

树形菜单的逻辑过程（个人想法）

1. 使用mybatis对数据库表进行sql操作，取出所需数据；
2. 在service的实现类中编写List转树形结构的实现函数；
3. 在JS中编写对树形结构数据的遍历函数，使数据可以在页面进行对树形菜单的查询操作。

mybatis取数据的实现

这是数据库表所需的两项数据

因为只要取出无重复的下一级数据就可以得到全部的上一级数据，所以使用group by进行筛选。

    <select id="selectCategory" resultType="map">
        select good_category,good_category_parent from good group by good_category
    </select>

service实现类中对数据的结构转换的函数

首先是将取出的数据中的所有最上级菜单数据取出的函数

    public ArrayList<Map< String, Object>> findParent(ArrayList<Map<String, Object>> arrayList) {
        ArrayList<Map<String,Object>> treeList = new ArrayList<>();
        ArrayList<String> list = new ArrayList<>();
        for (Map<String,Object> parentMap : arrayList){
            Map<String,Object> treeMap = new HashMap<>();
            String good_category_parent = "";
            int num=0;
            /*。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。*/
            //对于数据中在上级数据项中存在的非最上级数据进行筛选
            if(parentMap.get("good_category_parent") != null){
                for(Map<String,Object> firstMap : arrayList){
                    if(firstMap.get("good_category").toString().contains(parentMap.get("good_category_parent").toString())){
                        num += 1;   break; }
                }
                if(num != 0) { continue; }
                else { good_category_parent = parentMap.get("good_category_parent").toString(); }
    		/*。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。*/
            }else { good_category_parent = parentMap.get("good_category").toString(); }
            System.out.println(list.contains(good_category_parent));
            /*。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。*/
            //对筛选出的数据进行去重操作
            if(!list.contains(good_category_parent)) {
                list.add(good_category_parent);
                treeMap.put("good_category_parent", good_category_parent);
               //在此处使用递归函数findchildren查找所有的下级数据建立树形结构
                treeMap.put("children", findChildren(arrayList, good_category_parent));
                //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            }else {continue;}
            treeList.add(treeMap);
            /*。。。。。。。。。。。。。。。。。。。。。。。。。。。.。。。。。。。。。。。。。。。。。*/
            System.out.println(treeList);
        }
        return treeList;
    }

下面为findchildren函数的具体实现内容

    public ArrayList<Map< String, Object>> findChildren(ArrayList<Map<String, Object>> arrayList,String good_category_parent) {
        ArrayList<Map<String,Object>> childList = new ArrayList<>();
        for (Map<String,Object> map : arrayList){
            Map<String,Object> childMap = new HashMap<>();
            if(map.get("good_category_parent") != null) {
                if (good_category_parent.equals(map.get("good_category_parent").toString())) {
                    if (map.get("good_category") != null) {
                        childMap.put("good_category_parent", map.get("good_category").toString());
                        childMap.put("children", findChildren(arrayList, map.get("good_category").toString()));
                    }else {continue;}
                }else {continue;}
            }else {continue;}
            childList.add(childMap);
        }
        return childList;
    }

JS中对树形结构数据在页面显示的函数编写

在这里使用了Jquery插件通过Ajax从后台获取数据，并通过onclick点击触发函数在页面显示最上级菜单

function selectCategory() {
    $.ajax({
        url:'/MenuOperate/SelectGoodsCategory',
        dataType:'json',
        type:'POST',
        success:function (data) {
            console.log(data);
            let html = '';
            for (let i = 0; i < data.length; i++) {
                console.log(data[i].good_category_parent);
                const treeChildren = JSON.stringify(data[i].children).replace(/"/g, " ");
                console.log(treeChildren);
                //在拼写字符串时如果想要实现函数中数组作为形参传递数据，需要先转换成字符串
                html += '<li><a onclick="selectByCategory(\'' + data[i].good_category_parent + '\',\'' + treeChildren + '\')">'
                    + data[i].good_category_parent + '</a></li>' +
                    '<li><ul id="' + data[i].good_category_parent + '"></ul></li>';
            }
            const hidden = '<li><a onclick="hideContent(\'' + "firstCategory" + '\')">^^^</a></li>';
            const content = html + hidden;
            $("#firstCategory").html(content);
       }
   });
}

下面是触发点击事件实现循环遍历下级菜单的递归函数

function selectByCategory(good_category_parent,children) {
    children=children.replace(/ /g,'"');
    console.log(children);
    const childrenList = JSON.parse(children);
    console.log(childrenList);
    if (childrenList.length !== 0) {
        let html = '';
        for (let i = 0; i < childrenList.length; i++) {
            let children=JSON.stringify(childrenList[i].children).replace(/"/g," ");
            html += '<li><a onclick="selectByCategory(\'' + childrenList[i].good_category_parent + '\',\'' +
                children + '\')">'
                + childrenList[i].good_category_parent + '</a></li>' +
                '<li><ul id="' + childrenList[i].good_category_parent + '"></ul></li>';
        }
        const hidden = '<li><a onclick="hideContent(\'' + good_category_parent + '\')">^^^</a></li>';
        const content = html + hidden;
        $("#"+good_category_parent).html(content);
    } else {
        alert("无下级分类");
    }

对展开菜单的隐藏功能的实现

function hideContent(idefine){
    const html = '';
    $("#"+idefine).html(html);
}

html页面代码以及实现效果截图（页面未优化）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树形菜单</title>
    <script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/js/tree.js"></script>
</head>
<body>

<ul><li><a onclick="selectCategory()">商品分类</a></li>
    <li><ul id="firstCategory"></ul></li>
</ul>
<div></div>
</body>
</html>

实现效果截图