kendo ui 来自 MVC 控制器的树视图数据

Question

我有一个存储过程，它使用 EF 从 SQL 数据库 return 分层数据。树视图仅显示父节点而不显示子节点。我一直在研究这个问题一段时间，但没有任何结果，这令人沮丧。感谢您为我解决这个问题提供的任何帮助。

ParentId  Id         Title                         Level
--------- ---------- ----------------------------- ------
NULL      1          Chief Executive Officer       0
1         273        Vice President of Sales       1
273       16         Marketing Manager             2
273       274        North American Sales Manager  2
273       285        Pacific Sales Manager         2
16        23         Marketing Specialist          3
274       275        Sales Representative          3
274       276        Sales Representative          3
285       286        Sales Representative          3

在服务层，我有一个协调器 class，return 上面的 table。

public IEnumerable<TreeviewItem> GetBusinessStructure()
{
    return Context.ExecuteStoreQuery<TreeviewItem>("spGetEmployees");
}

模特class

public class TreeviewItem
{
    public int Id { get; set; }

    public string Name { get; set; }

    public int? ParentId { get; set; }
    public virtual TreeviewItem Parent { get; set; }

    public virtual ICollection<TreeviewItem> Children { get; set; }
}

控制器

public JsonResult BusinessStructure(int? id)
    {
        var model = from e in        BusinessStructureOrchestrator.GetBusinessStructures()
                    where (id.HasValue ? e.ParentId == id : e.ParentId == null)
                    select new
                    {
                        id = e.Id,
                        Name = e.Name,
                        hasChildren = e.Children.Any()
                    };

        return Json(model, JsonRequestBehavior.AllowGet);
    }

景色

@model FilterBusinessStructureViewModel
<div class="form-group">

<label for="" class="col-sm-12 control-label">Choose Divisions/BUs/Sites</label>

<div class="col-sm-12">
    @(Html.Kendo().TreeView()
            .Name("tvBusinessStructure")
            .DataTextField("Name")
            .Checkboxes(checkedboxes => checkedboxes
                .Name("SelectedDivision")
                .CheckChildren(true)
            )
            .DataSource(dataSource => dataSource
                .Model(m => m
                    .Id("Id")
                    .HasChildren("hasChildren")
                    .Children("Children"))
                    .Read(read => read
                                .Action("BusinessStructure", "Report")
                    )
            )
        )
</div>

Answer 1

经过四处寻找和反复试验，我找到了一段代码并对其进行了修改。用于遍历层次结构的 class 看起来像这样

public static class Treeview
{
    public static IList<TreeviewItem> BuildTree(this IEnumerable<TreeviewItem> source)
    {
        var groups = source.GroupBy(i => i.ParentId);

        var roots = groups.FirstOrDefault(g => g.Key.HasValue == false).ToList();

        if (roots.Count > 0)
        {
            var dict = groups.Where(g => g.Key.HasValue).ToDictionary(g => g.Key.Value, g => g.ToList());
            for (int i = 0; i < roots.Count; i++)
                AddChildren(roots[i], dict);
        }

        return roots;
    }

    private static void AddChildren(TreeviewItem node, IDictionary<int, List<TreeviewItem>> source)
    {
        if (source.ContainsKey(node.Id))
        {
            node.Children = source[node.Id];
            for (int i = 0; i < node.Children.Count; i++)
                AddChildren(node.Children[i], source);
        }
        else
        {
            node.Children = new List<TreeviewItem>();
        }
    }

}

然后我对控制器方法做了如下修改

public JsonResult BusinessStructure(int? id)
    {

        List<BusinessStructureModel> businessStructures = BusinessStructureOrchestrator.GetBusinessStructures()
        .Select(e => new BusinessStructureModel
        {
            Id = e.ID,
            Name = e.Name,
            ParentId = e.ParentID
        })
        .BuildTree()
        .ToList();

        return Json(businessStructures, JsonRequestBehavior.AllowGet);
    }

kendo ui 来自 MVC 控制器的树视图数据

kendo ui treeview data from MVC controller

model-view-controller

entity-framework

hierarchy

kendo-ui