從零開始Blazor Server(12)–編輯菜單

  • 2022 年 8 月 22 日
  • 筆記

上個星期有點事，導致沒法及時更新。現在我們繼續更我們的從零開始系列。

這個系列也快要結束了，目前規劃再有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是一樣的，只是把它的子項拿出來了而已。

剩下的都是之前說過的內容。就不在說了。這裡還有一個要注意的地方就是選擇父級菜單的時候按說應該把自己和自己的子菜單螢幕蔽掉，因為你設置自己的父級是自己的子菜單，這樣就找不到這個菜單了。我也是偷懶，木有做。

程式碼在//github.com/j4587698/BlazorLearn，分支lesson12

VirMach 便宜 VPS

QNews

QNews