1

我正在实现一个将使用 MudBlazor TreeView 的项目，并了解如何实现 C# 树，但不确定如何添加或删除选定的节点并相应地更新树视图。请注意，这与服务器端 CRUD 无关，而只是更新与树中的新节点或已删除节点一起显示的树。即我想选择一个节点并从视图中删除它，或者将一个新节点添加到树中并显示它。

4

1 回答 1

0

您可以轻松地在 MudBlazor 中的树视图的项目集合中添加和删除项目。我将https://mudblazor.com/components/treeview上的一个示例转换为一个小演示，供您在线玩：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);
    }
}

注意：确保您的模型覆盖Equals，GetHashcode就像我在示例中显示的那样！

于 2021-11-22T15:29:55.197 回答