easyui框架——使用递归实现简单的菜单树

快来打我* 2022-12-02 00:47 107阅读 0赞

首先，我们先来看看效果吧！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70_pic_center]  
今天我们就详细的讲解一下这个菜单树是怎么实现的。

1.  数据库：单纯的实现这棵树，数据库只需要一张菜单表（Menu）即可。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70_pic_center 1]
2.  我们需要使用递归来对每个节点以及节点下的内容进行遍历。所以我们需要一个TreeModel（包含当前节点需要的内容以及该节点的子节点列表）来对这些内容进行封装。  
    注：只需要实现树的效果只需要上面我圈出来的字段。对应下面的MenuId，MenuName，pid（父节点），其他的可以删除。List children（用于封装每一个节点的子节点列表）。

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    namespace Model
    { 
        //树的节点对象
        public class TreeModel
        { 
            //节点自身的菜单信息
            public int MenuId {  get; set; }
    
            public string MenuName {  get; set; }
    
            public string MenuIconCls {  get; set; }
    
            public string pid {  get; set; }
    
            public string MenuUrl {  get; set; }
    
            public int IsLeft {  get; set; }
    
            public string MenuCode {  get; set; }
            //节点自身的子节点信息（必须用children命名，与框架需要内容对应）
            public List<TreeModel> children {  get; set; }
        }
    }

1.  现在我们通过一般处理程序来对数据库查询的所有菜单信息进行遍历。（不清楚的仔细看看注释哦）

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Model;
    using BLL;
    using System.Text;
    
    namespace AccessControl
    { 
        /// <summary>
        /// Summary description for TreeHandler
        /// </summary>
        public class TreeHandler : IHttpHandler
        { 
    
            public void ProcessRequest(HttpContext context)
            { 
                //因为进行操作的可能不止一个，所以这里使用type来区分进行的操作。
                var type = context.Request["type"];
                if (type == "getTree")
                { 
                    LoadMenuData(context);
                }
            }
            //加载树信息的方法
            public void LoadMenuData(HttpContext context)
            { 
                //创建一个menuBll对象
                MenuBLL menuBll = new MenuBLL();
                //调用menuBll里的方法，获取所有菜单信息
                var listAllMenu = menuBll.SearchList();
                //如果（菜单的内容不为空）
                if (listAllMenu.Any())
                { 
                    //创建一个list用于封装返回数据
                    List<TreeModel> treeModels = new List<TreeModel>();
                    //遍历菜单
                    //1.查询顶级菜单（在数据库中menu_parent=-1就是顶级菜单,这里的MenuParent与菜单实体属性对应。）
                    //这里的item就是遍历出来的menu_parent = -1的菜单实体
                    foreach (var item in listAllMenu.Where(x => x.MenuParent == "-1"))
                    { 
                        //创建一个treeModel实体
                        TreeModel treeModel = new TreeModel();
                        //将treeModel实体添加到刚刚创建的list中
                        treeModels.Add(treeModel);
                        //填充内容
                        treeModel.MenuId = item.MenuId;
                        treeModel.MenuName = item.MenuName;
                        treeModel.pid = item.MenuParent;
                        //现在查询当前菜单的子菜单
                        //GetNextMenu(当前菜单的MenuId（与数据库的位置标识符menu_id对应）, 所有菜单信息, 当前菜单的treeModel实体）
                        this.GetNextMenu(item.MenuId,listAllMenu,treeModel);
                    }
                    var result = Newtonsoft.Json.JsonConvert.SerializeObject(treeModels);
                    context.Response.Write(result);
                }
            }
    
            
            private void GetNextMenu(int fid, List<MenuModel> listAll, TreeModel treeModel)
            { 
                //封装当前父id的子菜单（查询父id——对应数据库的menu_parent = 传入id的菜单列表))
                var listChildren = listAll.Where(x => x.MenuParent == fid.ToString()).ToList();
                //如果传入的id存在子菜单
                if (listChildren.Any())
                { 
                    //遍历这个列表
                    foreach (var item in listChildren)
                    { 
                        //创建一个儿子节点对象（因为他可能还有儿子）
                        TreeModel treeModelTwo = new TreeModel();
                        //判断当前treeModel是否为空
                        if (treeModel.children == null)
                        { 
                            //如果为空就创建
                            treeModel.children = new List<TreeModel>();
                        }
                        //将创建的儿子节点加入treeModel的child
                        treeModel.children.Add(treeModelTwo);
                        //填充内容
                        treeModelTwo.MenuId = item.MenuId;
                        treeModelTwo.MenuName = item.MenuName;
                        treeModelTwo.pid = item.MenuParent;
                        //查询treeModelTwo的儿子节点
                        this.GetNextMenu(item.MenuId, listAll, treeModelTwo);
                    }
                }
            }
    
            public bool IsReusable
            { 
                get
                { 
                    return false;
                }
            }
        }
    }

1.  前端页面（确定自己已经引入了需要的js和css文件）

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>实现一颗菜单树</title>
        <link href="easyui-1.5.5/gray/easyui.css" rel="stylesheet" />
        <script src="EasyUI/JS/jquery.min.js"></script>
        <script src="easyui-1.5.5/jquery.easyui.min.js"></script>
    </head>
    <body class="easyui-layout">
        <div data-options="region:'center',title:'菜单信息'">
            <table id="AccessTree" class="easyui-treegrid" style="height: 80%;" data-options="region:'center',border:false,lines:true"></table>
        </div>
    </body>
    </html>
    <script>
     $(function () { 
            LoadMenuData();
     })
    function LoadMenuData() { 
        $('#AccessTree').treegrid({ 
            //这些属性如果有不清楚的可以去官网上查看
            nowrap: true,
            autoRowHeight: true,
            striped: true,
            collapsible: false,
            fit: true,
            fitColumns: false,
            singleSelect: false,
            checkOnSelect: true,
            remoteSort: false,
            idField: 'MenuId',
            treeField: 'MenuName',
            animate: false,
            columns: [[
                //注意这里与传过来的内容对应
                {  field: 'MenuId', checkbox: true },
                {  field: 'MenuName', title: '权限列表', width: 280, align: 'left', halign: 'left' }
            ]],
            onLoadSuccess: function (index, data) { 
                //加载成功进行的操作（这里打印了传过来的内容，在浏览器按下f12可以查看）
                console.log(data);
            },
            //选中一行做出的处理
            onSelect: function (data) { 
                //获取选中行的父亲节点
                var selectData = $('#AccessTree').treegrid('getParent', data.MenuId);
                //如果有父亲节点就把父亲节点选中
                if (selectData != null) { 
                    $('#AccessTree').treegrid("select", selectData.MenuId);
                }
            },
            //取消选中的节点
            onUnselect: function (rowIndex) { 
                //寻找当前节点的子节点
                var children = $("#AccessTree").treegrid('getChildren', rowIndex.MenuId);
                //如果子节点不为空
                if (children != null) { 
                    //遍历孩子节点，将所有孩子节点置为未选择状态
                    for (var i = 0; i < children.length; i++) { 
                        $('#AccessTree').treegrid("unselect", children[i].MenuId);
                    }
                }
            }
        });
        BindData();
    }
    function BindData() { 
        //这里的getTree与一般处理程序取的type对应
        $.post("TreeHandler.ashx?type=getTree", function (data) { 
            $('#AccessTree').treegrid("loadData", data);
        }, 'json');
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/0ec2e5f916fa4a85bd73567fff6f0af9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/e02b39ac41154088b575f719c04ed807.png