tnblog
首页
视频
资源
登录
什么时候才能领悟,取之越多失之越多
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术

递归树形解析

3341人阅读 2020/1/9 17:23 总访问:852807 评论:3 收藏:0 手机
分类: ASP.NET

使用的是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>



欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价