从零开始Blazor Server(12)--编辑菜单
2024-10-20 20:43:57
上个星期有点事,导致没法及时更新。现在我们继续更我们的从零开始系列。
这个系列也快要结束了,目前规划再有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
最新文章
- STemwin汉字显示
- POCO库——Foundation组件之核心Core
- 订餐系统之Excel批量导入
- Windows10环境配置nat123端口映射访问mysql
- mysql创建用户及授权相关命令
- [转]LUA元表
- MongoDB与.NET结合使用一(mongodb在windows 2003上的安装)
- Eclipse中Maven+Spring3.2.8+SpringMVC HelloWorld项目
- highchart.js的使用
- Brush、Color、String相互转换
- maven系列(2)-第一个maven的项目
- dede仿站笔记
- NET基础课--配置文件2
- iOS &;quot;The sandbox is not in sync with the Podfile.lock&;quot;解决方式
- Software Version
- H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持
- 《JavaScript高级程序设计》笔记:DOM2和DOM3(十二)
- Linux进程管理 (篇外)内核线程简要介绍
- 错误代码 0x800700b7 配置错误定义了重复的“system.web.extensions/scripting/scriptResourceHandler”节
- 设计模式笔记:策略模式(Strategy)