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 组件动态生成数据就完成了。
