使用layui树如何动态加载菜单权限数据

Question

使用layui怎样实现这样的效果，我是使用dotnet core mvc的把数据传到前端的，请问这个数据实体怎样构建，怎样递归把数据保存起来传到前段显示，前段如何动态构建layui树

Answer 1

qingwenc 晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

要使用layui树动态加载菜单权限数据，你可以按照以下步骤进行：

1. 确定数据实体的结构：根据你的需求，可以构建一个包含菜单权限的实体类。例如：

public class MenuPermission
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int ParentId { get; set; }
    public List<MenuPermission> Children { get; set; }
}

1. 递归构建数据结构：根据你的菜单权限数据，递归构建树形结构的数据。可以使用递归函数来实现。例如：

private static List<MenuPermission> BuildMenuTree(List<MenuPermission> menuPermissions, int parentId)
{
    var menuTree = new List<MenuPermission>();
    
    foreach (var menuPermission in menuPermissions)
    {
        if (menuPermission.ParentId == parentId)
        {
            menuPermission.Children = BuildMenuTree(menuPermissions, menuPermission.Id);
            menuTree.Add(menuPermission);
        }
    }
    
    return menuTree;
}

1. 将数据传到前端：使用dotnet core mvc，在Controller中获取菜单权限数据并构建树形数据结构，然后将结果传到前端。例如：

public IActionResult Index()
{
    var menuPermissions = GetMenuPermissionsFromDatabase();
    var menuTree = BuildMenuTree(menuPermissions, 0);
    
    return View(menuTree);
}

1. 前端构建layui树形菜单：在前端页面中使用layui.tree组件来构建树形结构的菜单。例如：

layui.use(['tree', 'jquery'], function(){
  var tree = layui.tree, $ = layui.jquery;
  
  var data = @Html.Raw(Json.Serialize(Model));

  tree.render({
    elem: '#menuTree',
    data: data,
    showCheckbox: true,
    accordion: true
  });
});

通过以上步骤，你可以实现使用layui树动态加载菜单权限数据。在后端通过递归构建数据结构，再将数据传到前端，前端再使用layui.tree组件来构建树形菜单。