递归生成多级菜单

html:

<div id="listSet"></div>

js:

    <script type="text/javascript">
        $(function () {
            $('body').addClass('loaded');
            $('#loader-wrapper .load_title').remove();
            GetSet();
        })
        //获取报警设置列表
        function GetSet() {
            $.ajax({
                url: '/SYS_BJSET/GetList',
                type: 'GET',
                success: function (data) {
                    console.table(data);

数据截图：

                    GetData(0, data);
                    $('#listSet').append(menus);
                },
                error: function () {
                    alert("获取失败！");
                }
            })
        };

        //菜单列表html
        var menus = '';
        //根据菜单主键id生成菜单列表html
        function GetData(name, arry) {
            var childArry = GetParentArry(name, arry);
            if (childArry.length > 0) {
                
                for (var i in childArry) {

                   //一级菜单
                    if (childArry[i].BJ_Parent == "0") {
                        menus += "<span class='list-group-item active'>" + childArry[i].BJ_Name+
                            "</span>";
                    }

                 //其他级别菜单
                    else {
                        if (childArry[i].BJ_BZW == "1") {
                            menus += "<span class='list-group-item'>" + childArry[i].BJ_Name +
                            "<button id=" + childArry[i].BJSet_ID + " onclick='openAlarm(\"" + childArry[i].BJSet_ID + "\")' type='button' class='btn btn-info' style='float:right;margin-top:-7px;'>关闭</button>" +
                                "</span>";
                        }
                        else {
                            menus += "<span class='list-group-item'>" + childArry[i].BJ_Name +
                           "<button id=" + childArry[i].BJSet_ID + " onclick='openAlarm(\"" + childArry[i].BJSet_ID + "\")' type='button' class='btn btn-success' style='float:right;margin-top:-7px;'>启用</button>" +
                               "</span>";
                        }
                    }
                    GetData(childArry[i].BJ_Name, arry);

                }
                
            }

        };
        //根据菜单name获取下级菜单
        function GetParentArry(name, arry) {
            var newArry = new Array();
            for (var i in arry) {
                if (arry[i].BJ_Parent == name)
                    newArry.push(arry[i]);
            }
            return newArry;
        };
        //启用报警
        function openAlarm(id) {
            var flag = $('#' + id).text();
            if (confirm('是否确认操作？')) {   
            $.ajax({
                url: '/SYS_BJSET/Operate',
                type: 'POST',
                data: { id: id, type: flag },
                success: function (data) {
                    if (data == "Success") {
                        if (flag == "关闭") {
                            alert("关闭成功！");
                            $('#' + id).removeClass('btn-info');
                            $('#' + id).addClass('btn-success');
                            $('#' + id).text('启用');
                        }
                        if (flag == "启用") {
                            alert("启用成功！");
                            $('#' + id).removeClass('btn-success');
                            $('#' + id).addClass('btn-info');
                            $('#' + id).text('关闭');
                        }
                    }
                    else {
                        alert("操作失败！");
                    }
                },
                error: function () {
                    console.log("open failed.");
                }
            })

            }
        };

    </script>

 

页面截图：

代码参考：

https://www.cnblogs.com/tangyifeng/p/7364727.html