递归树形解析

使用的是layui的tree

后台：

/// <summary>
/// 递归函数
/// </summary>
/// <returns></returns>
public void ParseTree(List<Department> departments, List<TreeModel> treeModels, int? parentId)
{
    //找当前层级下级(如果parentId==null那就是第一级)
    List<Department> result = departments.Where(a => a.ParentId == parentId).ToList();
    foreach (Department item in result)
    {
        TreeModel treeModel = new TreeModel();
        treeModel.id = item.Id;
        treeModel.title = item.DepartmentName;
        //递归
        ParseTree(departments, treeModel.children, treeModel.id);
        treeModels.Add(treeModel);
    }
}
[HttpGet]
public JsonResult GetTreeData()
{
    mydbContext mydbContext = new mydbContext();
    List<Department> departments = mydbContext.Department.ToList();
    List<TreeModel> treeModels = new List<TreeModel>();
    ParseTree(departments, treeModels, null);
    return Json(treeModels);
}

后台GetTreeData方法的详细注释：

[HttpGet]
public JsonResult GetTreeData()
{
    //List<Department>自己从数据库查询出来
    List<Department> departments = mydbContext.Department.ToList();
	//List<TreeModel>是后台构建的一个格式，前端需要什么json格式就对应构建
    List<TreeModel> treeModels = new List<TreeModel>();
	//调用递归函数，把从数据库查询出来的数据解析成前端需要的数据
    ParseTree(departments, treeModels, null);
	//返回json数据给前端
    return Json(treeModels);
}

前台：前台很简单就是把处理好的json赋值给layui的tree即可

<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>