asp.net core 解析 easyui的tree的json

easyui的tree组件支持从JSON加载数据，在asp.net中，我们可以从数据库读取相关数据，然后转换成json格式后返回给easyui的tree组件。下面是具体过程：

1、定义相关的节点类

public class PermissionTreeNode
{
    public int id { get; set; }
    public string? text { get; set; }
    public string? state { get; set; }
    public bool @checked { get; set; }
    public PermissionTreeNode[]? children { get; set; }
}

public class Permission
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public Role? Role { get;set; }
    public DateTime? CreatedAt { get; set; } = DateTime.Now;
    public DateTime? UpdatedAt { get; set; } = DateTime.Now;
}

public class Role 
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public ICollection<Permission>? Permissions { get; set; }
    public ICollection<Account>? Accounts { get; set; }
    public DateTime? CreatedAt { get; set; } = DateTime.Now;
    public DateTime? UpdatedAt { get; set; } = DateTime.Now;
}

2、编写生成节点的函数 ParseJson，在这个函数里面加了权限处理，只添加当前用户有权限的节点：

public PermissionTreeNode ParseJson(PermissionTreeNode permissionTreeNode, List<Permission> rolePermissions, Role role)
{
    if (permissionTreeNode.children != null)
    {
        foreach (var menu in permissionTreeNode.children)
        {
            if (rolePermissions.Any(x => x.Name == menu.text) || role.Name == "超级管理员")
            {
                menu.@checked = true;
            }

            if (menu.children != null)
            {
                ParseJson(menu, rolePermissions, role);
            }
        }
    }

    return permissionTreeNode;
}

3、最后，我们在初始化tree的数据的时候，调用InitPermissionTree函数生成节点数据，再通过JsonSerializer.Serialize函数转换成json格式，不要忘记在转换后的json字符串两边分别加上[和]，不然easyui的tree组件加载不了。

public ContentResult InitPermissionTree(int roleId)
{
    var rolePermissions = _appDbContext.Permissions.Where(x => x.Role != null && x.Role.Id == roleId).ToList();

    var role = _appDbContext.Roles.Where(x => x.Id == roleId).FirstOrDefault();

    var jsonFile = Path.Combine(_env.WebRootPath, $"PermissionTree.json");
    var json = System.IO.File.ReadAllText(jsonFile);


    JsonSerializerOptions options = new JsonSerializerOptions();
    options.ReferenceHandler = default;
    var permissionTreeNode = JsonSerializer.Deserialize<PermissionTreeNode>(json, options);

    if (permissionTreeNode != null && role != null)
    {
        permissionTreeNode = ParseJson(permissionTreeNode, rolePermissions, role);
    }

    var result = "[" + JsonSerializer.Serialize(permissionTreeNode) + "]";

    return Content(result, "application/json");
}

我们可以使用F12浏览器开发者工具查看接口返回的JSON，如下:

  {
    "id": 1,
    "text": "工作总结生成管理系统",
    "checked": false,
    "children": [
      {
        "id": 100,
        "text": "内容管理",
        "state": "open",
        "checked": false,
        "children": [
          {
            "id": 101,
            "text": "文章管理",
            "checked": false,
            "children": [
              {
                "id": 102,
                "text": "文章生成",
                "checked": false
              },
              {
                "id": 103,
                "text": "编辑文章",
                "checked": false
              },
              {
                "id": 104,
                "text": "删除文章",
                "checked": false
              },
              {
                "id": 105,
                "text": "状态设置",
                "checked": false
              },
              {
                "id": 106,
                "text": "导出Word文档(文章管理)",
                "checked": false
              }
            ]
          },
          {
            "id": 200,
            "text": "素材库",
            "state": "opened",
            "checked": false,
            "children": [
              {
                "id": 201,
                "text": "新增素材",
                "checked": false
              },
              {
                "id": 202,
                "text": "编辑素材",
                "checked": false
              },
              {
                "id": 203,
                "text": "删除素材",
                "checked": false
              },
              {
                "id": 204,
                "text": "导入导出",
                "checked": false
              },
              {
                "id": 205,
                "text": "素材审核",
                "checked": false
              }
            ]
          },
          {
            "id": 300,
            "text": "标签库",
            "state": "opened",
            "checked": false,
            "children": [
              {
                "id": 301,
                "text": "创建标签",
                "checked": false
              },
              {
                "id": 302,
                "text": "编辑标签",
                "checked": false
              },
              {
                "id": 303,
                "text": "删除标签",
                "checked": false
              }
            ]
          },

          {
            "id": 400,
            "text": "模板库",
            "state": "opened",
            "checked": false,
            "children": [
              {
                "id": 401,
                "text": "新增模板",
                "checked": false
              },
              {
                "id": 402,
                "text": "编辑模板",
                "checked": false
              },
              {
                "id": 403,
                "text": "删除模板",
                "checked": false
              }
            ]
          },

          {
            "id": 500,
            "text": "档案库",
            "state": "opened",
            "checked": false,
            "children": [
              {
                "id": 501,
                "text": "删除档案",
                "checked": false
              },
              {
                "id": 502,
                "text": "查看档案",
                "checked": false
              },
              {
                "id": 503,
                "text": "导入Word文档",
                "checked": false
              },
              {
                "id": 504,
                "text": "导出Word文档(档案库)",
                "checked": false
              },
              {
                "id": 505,
                "text": "移到文章管理",
                "checked": false
              }
            ]
          }
        ]
      },
      {
        "id": 600,
        "text": "系统设置",
        "state": "open",
        "checked": false,
        "children": [
          {
            "id": 601,
            "text": "帐号管理",
            "state": "open",
            "checked": false,
            "children": [
              {
                "id": 602,
                "text": "新增帐号",
                "checked": false
              },
              {
                "id": 603,
                "text": "编辑帐号",
                "checked": false
              },
              {
                "id": 604,
                "text": "删除帐号",
                "checked": false
              },
              {
                "id": 605,
                "text": "重置密码",
                "checked": false
              }
            ]
          },
          {
            "id": 700,
            "text": "部门管理",
            "state": "open",
            "checked": false,
            "children": [
              {
                "id": 701,
                "text": "新增部门",
                "checked": false
              },
              {
                "id": 702,
                "text": "编辑部门",
                "checked": false
              },
              {
                "id": 703,
                "text": "删除部门",
                "checked": false
              }
            ]
          },
          {
            "id": 800,
            "text": "角色管理",
            "state": "open",
            "checked": false,
            "children": [
              {
                "id": 801,
                "text": "新增角色",
                "checked": false
              },
              {
                "id": 802,
                "text": "编辑角色",
                "checked": false
              },
              {
                "id": 803,
                "text": "删除角色",
                "checked": false
              }
            ]
          }

        ]
      }
    ]
  }

这样，asp.net core 给 easyui 的 tree 组件动态生成数据就完成了。