Jstree 2 级以上的树

问题描述

我有一个系统 每个用户都有角色和 ID 一些用户有父级，我想通过 Jstree 显示这棵树，但是当我从数据库中获取数据时，只显示 2 级，我如何展开它以显示整个我系统中的树？ 这是我在控制器中的操作：

  public async Task<IActionResult> Index2Async()
    {
        List<TreeViewNode> nodes = new List<TreeViewNode>();
        //Loop and add the Parent Nodes.
        //get roots
        foreach(var user in userManager.Users)
        {
            var checkUserIsEmployee = applicationDbContext.EmployeeInRoles.Where(s => s.UserId == user.Id).ToList().Count;
            if (checkUserIsEmployee>0)
            {
                continue;
            }
            else
            {
                nodes.Add(new TreeViewNode { id = user.Id,parent = "#",text = user.Name + " " + user.Family });
            }
        }
        //end get roots

        //Loop and add the Child Nodes.
        //get child
        foreach (var user in userManager.Users)
        {
            
            var Employee = applicationDbContext.EmployeeInRoles.ToList();
            foreach (var item in Employee)
            {
                if (user.Id == item.UserId)
                {
                    var ParentRole = roleManager.Roles.SingleOrDefault(s => s.Id == item.RoleId);
                    foreach(var parent in userManager.Users)
                    {
                        if (await userManager.IsInRoleAsync(parent,ParentRole.Name))
                        {
                            nodes.Add(new TreeViewNode { id = user.Id + "-" + parent.Id,parent = parent.Id,text = user.Name+" "+user.Family });
                        }
                    }
                }
            }
        }
        //end get child

        //Serialize to JSON string.
        ViewBag.Json = JsonConvert.SerializeObject(nodes);
        return View();
      
    }

这是 cshtml 文件 (Index2):

<link rel="stylesheet" href="~/jstree/dist/themes/default/style.min.css" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/jstree/dist/jstree.min.js"></script>
<div style="color:#fff" id="jstree">
</div>
<form method="post" asp-controller="Admin" asp-action="Index2">
<input type="hidden" name="selectedItems" id="selectedItems" />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
jQuery(function ($) {
    $('#jstree').on('changed.jstree',function (e,data) {
            var i,j;
            var selectedItems = [];
            var postedItems = [];

            for(i = 0,j = data.selected.length; i < j; i++) {

                //Fetch the Id.
                var id = data.selected[i];

                //Remove the ParentId.
                if(id.indexOf('-') != -1){
                    id = id.split("-")[1];
                }

                //Add the Node to the JSON Array.
                selectedItems.push({
                    text: data.instance.get_node(data.selected[i]).text,id: id,parent: data.node.parents[0]
                });
            }

            //Serialize the JSON Array and save in HiddenField.
            $('#selectedItems').val(JSON.stringify(selectedItems));
        }).jstree({
            "core": {
                "themes": {
                    "variant": "large"
                },"data": @Html.Raw(ViewBag.Json)
            },"checkBox": {
                "keep_selected_style": false
            },"plugins": ["wholerow","checkBox"],});
  });

这是模型：

  public class TreeViewNode
{
    public string id { get; set; }
    public string parent { get; set; }
    public string text { get; set; }
}

结果如下：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）