如何使用引导行-列显示层次结构

Question

我目前有一个代表多级分层数据的平面列表，我负责服务器中的数据。但是当尝试以垂直图表的方式显示它时，我完全不知所措。

这是我正在做的事情的小提琴

https://dotnetfiddle.net/qfMOwD

目前结果

预期结果

编辑：这是使用层次结构的另一个迭代https://dotnetfiddle.net/JBLRUs

还是不太对，我仍然需要在 populateChild 中排序层次结构，但到目前为止还没有成功。

Answer 1

好吧，你第二次从视图（剃刀）一侧看它看起来好多了。您有一个可以遍历并渲染单元格的递归方法。接下来的事情是加载你的树结构。

首先，我们获取平面结构。您可以取消深度/广度，我们需要的只是父 ID。

List<ScriptHierarchy> items = new List<ScriptHierarchy>
{
    new ScriptHierarchy
    {
        IdScript_FK = 1,
        ParentId = null,
        Id = 1,
        Title = "Greeting",
    },
    new ScriptHierarchy
    {
        IdScript_FK = 1,
        ParentId = 1,
        Id = 2,
        Title = "Benefits",
    },
    new ScriptHierarchy
    {
        IdScript_FK = 1,
        ParentId = 2,
        Id = 3,
        Title = "Objections",
    },
    new ScriptHierarchy
    {
        IdScript_FK = 1,
        ParentId = 2,
        Id = 4,
        Title = "Closing - Sale",
    },
    new ScriptHierarchy
    {
        IdScript_FK = 1,
        ParentId = 3,
        Id = 4,
        Title = "Closing - Sale",
    },
    new ScriptHierarchy
    {
        IdScript_FK = 1,
        ParentId = 3,
        Id = 5,
        Title = "Closing - No Sale",
    }
};

现在这只是平面项目/数据行，将其构建到父级/子级中：

var groupedItems = items.Where(x => x.ParentId.HasValue)
    .GroupBy(x => x.ParentId);

foreach(var groupParent in groupedItems)
{
   var parent = items.First(x => x.Id == groupParent.Key);
   parent.Children.AddRange(groupParent.ToList());
}

var models = items.Where(x => !x.ParentId.HasValue).ToList();

models 是传递给视图的内容。它应该是您的视图插入的 2 个项目，然后递归调用每个项目的子项。

我们首先按其parentId 对所有“子”项目（具有parentId 的项目）进行分组。对于每一个，我们找到父级并将子级引用添加到 Children 集合中。完成后，我们返回顶级父级。现在，“模型”理想情况下应该返回两个顶级组：没有孩子的 Greeting 和有 2 个孩子的 Benefits。该分组会将两个结账项目置于福利下的结账项目下。