陪你听风

使用递归算法,递归解析树形结构

电脑版发表于:2020/1/10 18:06


在我们做权限管理的树形分布是,前台用的layui 框架,由于当时我们的树形层次只有两级。

试问,假如我们的层次有几十或上百的级的时候,难道我们也用那么多foreach循环吗?显然不科学。

今天我们就用看上去简单,却很实用的递归算法,解析树形结构。

一,新建一个.net core 的mvc项目


新建好项目后,不能像以前一样直接在新建项中添加ef了,需要用命令在添加ef的依赖


注意:所以依赖注入的命令不要放在项目里,要选择放入自己需要生成数据的类库里。



二,需要使用工具的Nuget包管理器添加EF的依赖。

Install-Package Microsoft.EntityFrameworkCore.SqlServer -version 2.1.0


三.如果是使用db first模型,需要根据数据库生成model,就还需要使用命令添加两个依赖

Install-Package Microsoft.EntityFrameworkCore.Tools -version 2.1.0 
Install-Package Microsoft.EntityFrameworkCore.SqlServer.Design

四.相关依赖注入成功之后,就可以再根据一个命令从数据库生成model了

Scaffold-DbContext "Server=.;Database=mydb;Trusted_Connection=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

  注意:这里的Database=数据库的名称


五.生成数据之后,新建一个tree控制器,实现递归解析


权限sqlserver数据库的层级数据如下:

1,在项目自身的models里新建一个TreeModel类:

namespace WebAppTree.Models
{
    public class TreeModel
    {
        public string id { get; set; }
        public string title { get; set; }
        public List<TreeModel> children = new List<TreeModel>();
    }
}


2,在tree控制器封装一个递归的方法(需传递三个参数),代码如下:

/// <summary>
        /// 递归函数
        /// </summary>
        public void ParseTree(List<Department> departmentList, List<TreeModel> treeModels,int?  parentId)
        {
            //找当前层级下级(如果ParentId==null 就是第一级)
            List<Department> Result= departmentList.Where(a => a.ParentId == parentId).ToList();
            foreach (Department item in Result)
            {
                TreeModel treeModel = new TreeModel();
                treeModel.id = item.Id;
                treeModel.title = item.DepartmentName;
                treeModels.Add(treeModel);
                //递归
                ParseTree(departmentList,treeModel.children,Convert.ToInt32(treeModel.id));
            }
        }

3,get请求,封装一个返回json数据的方法,代码如下:

[HttpGet]
        public JsonResult GetTreeData()
        {
            mydbContext mydbContexts = new mydbContext();
            List<Department> departmentList = mydbContexts.Department.ToList();
            List<TreeModel> treeModels = new List<TreeModel>();
            ParseTree(departmentList,treeModels,null);
            return Json(treeModels);
        }


4,调试项目的该方法,返回了数据,就说明得到递归方法解析数据成功。


5,现在我们在tree/index,使用layui框架,调用数据,解析明确的树形结构

官网下载layui插件之后,放在wwwroot的lib目录下。



前台调用js,css等,在layui官网复制树形结构图代码,如下;

@{
    ViewData["Title"] = "Index";
}
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<div id="test12" class="demo-tree-more" style="margin-top:60px;"></div>
<script>
    layui.use(['tree', 'util'], function () {
        var tree = layui.tree
            , layer = layui.layer
            , util = layui.util
        $.get('/tree/GetTreeData', function (data) {
     
        //基本演示
        tree.render({
            elem: '#test12'
            , data: data
            , showCheckbox: true  //是否显示复选框
            , id: 'demoId1'
            , isJump: true //是否允许点击节点时弹出新窗口跳转
            , click: function (obj) {
                var data = obj.data;  //获取当前点击的节点数据
                layer.msg('状态:' + obj.state + '<br>节点数据:' + JSON.stringify(data));
            }
            });
        })
    });
</script>


6,绑定数据之后,我们就运行该视图,就可以看到树形解析的层级关系了。


现在大家可以在数据库添加一条 特殊按摩节点下的一条数据,然后刷新页面,就会逐层展开下级啦。


由于我这里数据提前添加了的,所以截图上已经存在该数据,喜欢的朋友可以自己测试哦。

喜欢的话可以加收藏哇,



关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢