将 mudblazor treeview 绑定到对象

Question

我是 blazor 的新手，需要创建一个可以在其中创建和删除节点的动态树视图。所有这些数据都保存在数据库中。从数据库中提取数据后，我需要创建什么样的对象来绑定到 Mudtreeview？如果最初只呈现第一级节点，我如何在节点单击时加载子节点？有什么地方有例子吗？ mudblazor 网站上的所有示例代码都是静态数据。

Answer 1

如果将树视图绑定到 MudBlazor 中的集合，则添加和删除项目很容易。我做了一个小演示供您在线玩：https://try.mudblazor.com/snippet/cuwlvFQcfJTzHuki

示例的完整代码如下：

<MudButton OnClick="AddItems" Variant="Variant.Filled">Add items</MudButton>
<MudButton OnClick="DeleteItems" Variant="Variant.Filled">Delete items</MudButton>

<MudPaper Width="300px" Elevation="0">
    <MudTreeView Items="TreeItems" MultiSelection="true" @bind-ActivatedValue="ActivatedValue" @bind-SelectedValues="SelectedValues">
        <ItemTemplate>
            <MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems" Value="@context"
                             Icon="@context.Icon" Text="@context.Title" EndText="@context.Number?.ToString()" EndTextTypo="@Typo.caption" />
        </ItemTemplate>
    </MudTreeView>
</MudPaper>

<div style="width: 100%">
    <MudText Typo="@Typo.subtitle1">Activated item: @(ActivatedValue?.Title)</MudText>
    <MudText Typo="@Typo.subtitle1">Sum of selected items: @GetSelectedSum()</MudText>
</div>

@code {
    private TreeItemData ActivatedValue { get; set; }

    private HashSet<TreeItemData> SelectedValues { get; set; }

    private HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();

    public class TreeItemData
    {
        public string Title { get; set; }

        public string Icon { get; set; }

        public int? Number { get; set; }

        public bool IsExpanded { get; set; }

        public HashSet<TreeItemData> TreeItems { get; set; }

        public TreeItemData(string title, string icon, int? number = null)
        {
            Title = title;
            Icon = icon;
            Number = number;
        }

        public override bool Equals(object x) {
            var other = x as TreeItemData;
            if (other==null)
                return false;
            return other.Title==Title;
        }

        public override int GetHashCode() {
            return Title.GetHashCode();
        }
    }

    protected override void OnInitialized()
    {
        TreeItems.Add(new TreeItemData("All Mail", Icons.Filled.Email));
        TreeItems.Add(new TreeItemData("Trash", Icons.Filled.Delete));
        TreeItems.Add(new TreeItemData("Categories", Icons.Filled.Label)
        {
            IsExpanded = true,
            TreeItems = new HashSet<TreeItemData>()
            {
                new TreeItemData("Social", Icons.Filled.Group, 90),
                new TreeItemData("Updates", Icons.Filled.Info, 2294),
                new TreeItemData("Forums", Icons.Filled.QuestionAnswer, 3566),
                new TreeItemData("Promotions", Icons.Filled.LocalOffer, 733)
            }
        });
        TreeItems.Add(new TreeItemData("History", Icons.Filled.Label));
    }

    public int GetSelectedSum()
    {
        return SelectedValues?.Sum(i => i.Number ?? 0) ?? 0;
    }

    private int i=0;

    public void AddItems() {
        TreeItems.Add(new TreeItemData("Added Item " + (i++), Icons.Filled.Coronavirus));
    }

    public void DeleteItems() {
        var item=TreeItems.FirstOrDefault(x=>x.Title.StartsWith("Added Item"));
        TreeItems.Remove(item);
    }
}

将 mudblazor treeview 绑定到对象

binding mudblazor treeview to an object

c#

treeview

blazor

mudblazor