扁平数据树形化（只到二级菜单）

// 模拟数据
const menuArray = [
        { id: 1, pageName: "用户管理", pid: 0 },
        { id: 2, pageName: "图书管理", pid: 0 },
        { id: 3, pageName: "销售管理", pid: 0 },
        { id: 4, pageName: "借阅管理", pid: 0 },
        { id: 5, pageName: "系统设置", pid: 0 },
        { id: 6, pageName: "用户类型管理", pid: 1 },
        { id: 7, pageName: "用户信息管理", pid: 1 },
        { id: 8, pageName: "新增用户", pid: 1 },
        { id: 9, pageName: "图书类型管理", pid: 2 },
        { id: 10, pageName: "图书管理", pid: 2 },
        { id: 11, pageName: "入库管理", pid: 3 },
        { id: 12, pageName: "出库管理", pid: 3 },
        { id: 13, pageName: "借书管理", pid: 4 },
        { id: 14, pageName: "还书管理", pid: 4 },
        { id: 15, pageName: "退出", pid: 5 },
      ];


// 生成树形结构菜单
    function showMeau() {
        $.ajax({
            url: 'http://127.0.0.1:5656/pages/selectAll',
            success: res => {
                //一级菜单
                let ones = res.filter(item => {
                    return item.pid == 0;
                });
                let content = "";
                ones.forEach(element => {
                    content += "<li class='liOne'><a href='#'>" + element.pageName + "</a>";
                    //对应二级
                    let twos = res.filter(item => {
                        return item.pid == element.id;
                    })
                    content += '<ol>'
                    twos.forEach(el2 => {
                        content += "<li><a target='iframe1' href='"+el2.pageUrl+"'>" + el2.pageName + "</a></li>"
                    })
                    content += "</ol></li>";
                });
                $('#ulShow').append(content);

                //属性结构的折叠,jq
                $('.liOne:has(ol)').click(function (e) {
                    if (this == e.target) {
                        if ($(this).children('ol').is(':hidden')) {
                            $(this).children('ol').slideDown("slow");
                        } else {
                            $(this).children('ol').slideUp("slow");
                        }
                    }
                });

            }
        });
    }