ASP.NET Core Blazor中Tree控件的使用

b.razor:

<div class="page-left h-100 p-2">
        <div class="d-flex flex-column h-100">
            <div class="flex-grow-1 scroll" style="height:100px">
                <label>@RoleTitile</label>
                <Tree ShowSkeleton="true" ShowIcon="true"
                      ClickToggleNode="false" OnLoadTreeData="@OnLoadTreeDataAsync"
                      OnTreeItemClick="OnTreeItemClick"
                      class="flex-fill">
                    <DataMappings>
                        <TreeDataMapping Name="@nameof(TreeNodeInfo.Name)"
                                         Text="@nameof(TreeNodeInfo.Text)"
                                         IconImageUrl="@nameof(TreeNodeInfo.IconImageUrl)"
                                         Children="@nameof(TreeNodeInfo.SubNodeCollection)" />
                    </DataMappings>
                </Tree>
            </div>
        </div>
    </div>

b.razor.cs

partial class b

{

    private IEnumerable<TreeNodeInfo> TreeNodes { get; set; } = Enumerable.Empty<TreeNodeInfo>();
        [Parameter]
        public EventCallback<IEnumerable<TreeNodeInfo>> LoadNodeCompleted { get; set; }
        [Parameter]
        public Func<TreeNodeInfo, Task> TreeItemClick { get; set; } = item => Task.CompletedTask;
        private TreeNodeInfo SelectNode=new TreeNodeInfo();
        private async Task OnTreeItemClick(TreeNodeInfo node)
        {
            if (TreeItemClick != null)
            {
                SelectNode = node;
                await TreeItemClick.Invoke(node);
            }
            
        }

 private async Task<IEnumerable> OnLoadTreeDataAsync()
        {
            this.TreeNodes = GetTreeItems();
            if (this.LoadNodeCompleted.HasDelegate)
            {
                await this.LoadNodeCompleted.InvokeAsync(this.TreeNodes);
            }

            return this.TreeNodes;
        }

    private List<TreeNodeInfo> GetTreeItems()
        {
            TreeNodeInfo root = new TreeNodeInfo();
            List<TreeNodeInfo> list = new List<TreeNodeInfo>();
            if (Parameters["AuthorizeRoles"] != null)
            {
                string[] arrs = Parameters["AuthorizeRoles"].ToString().Split(';');
                foreach (string name in arrs)
                {
                    TreeNodeInfo node = new TreeNodeInfo();
                    node.Name = name;
                    node.Text = name;
                    node.IconImageUrl = GetIconCssString("Role.ico");
                    SetNodeTag(root, node);
                    root.AddSubNodeInfo(node);
                }
                if (root.SubNodeCollection.Count() > 0)
                {
                    root.SubNodeCollection.First().IsExpanded = true;
                }
                list.AddRange(root.SubNodeCollection);
            }
            return list;
        }

 private void SetNodeTag(TreeNodeInfo parent, TreeNodeInfo node)
        {
            if (parent.Tag == null)
                node.Tag = node.Name;
            else
                node.Tag = parent.Tag + "/" + node.Name;
        }

 private string GetIconCssString(string icon)
        {
            return Path.Combine(WebUtil.SystemIconsUri, icon);
        }

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值