从零开始Blazor Server(12)--编辑菜单

上个星期有点事，导致没法及时更新。现在我们继续更我们的从零开始系列。

这个系列也快要结束了，目前规划再有2-3篇，就结束了。

今天我们来说编辑菜单的问题，说实话菜单这种东西，你不更新代码加个页面，单独加个菜单没啥意义。除非你要跳转到其他的网站去。

但是呢，你没有这玩意感觉又不太完整，就加上吧。

菜单管理里，我们主要来说一下table的树形的处理。

先上代码:

<Table TItem="MenuEntity" IsBordered="true" ShowAddButton="true" ShowToolbar="true"
       ShowExtendButtons="true" IsTree="true" TreeNodeConverter="TreeNodeConverter"
       OnTreeExpand="OnTreeExpand" OnQueryAsync="OnQueryAsync" OnSaveAsync="OnSaveAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.Name"></TableColumn>
        <TableColumn @bind-Field="@context.Icon"></TableColumn>
        <TableColumn @bind-Field="@context.Url"></TableColumn>
        <TableColumn @bind-Field="@context.ParentId" Visible="false" Lookup="Menus"></TableColumn>
    </TableColumns>
</Table>

这里由于一般来说，一级菜单都不会太多，我就不做菜单分页了，没啥意义。

这里主要说一下TreeNodeConverter和OnTreeExpand。其中在开始的时候，会调用TreeNodeConverter来将内容转换为IEnumerable<TableTreeNode<MenuEntity>>。

代码如下：

private Task<IEnumerable<TableTreeNode<MenuEntity>>> TreeNodeConverter(IEnumerable<MenuEntity> arg)
    {
        return Task.FromResult(arg.Select(x => new TableTreeNode<MenuEntity>(x)
        {
            HasChildren = x.Children is {Count: > 0 }
        }));
    }

这里我写的很简单，就处理了一下是否有子项。并没有递归获取下一级，这里也算偷懒吧。

如果你想在初始阶段就展开整个树的话，那么这里一定要在之类递归把所有的内容转换完毕，因为你单独写IsExpand的话，并不会调用OnTreeExpand获取下一级节点，只会图标变为展开状态。这里后期可能会改变。

OnTreeExpand也很简单

    private Task<IEnumerable<TableTreeNode<MenuEntity>>> OnTreeExpand(MenuEntity arg)
    {
        return Task.FromResult(arg.Children!.Select(x => new TableTreeNode<MenuEntity>(x)
        {
            HasChildren = x.Children is {Count: > 0 }
        }));

跟TreeNodeConverter是一样的，只是把它的子项拿出来了而已。

剩下的都是之前说过的内容。就不在说了。这里还有一个要注意的地方就是选择父级菜单的时候按说应该把自己和自己的子菜单屏蔽掉，因为你设置自己的父级是自己的子菜单，这样就找不到这个菜单了。我也是偷懒，木有做。

代码在https://github.com/j4587698/BlazorLearn，分支lesson12