Enterprise-level component library based on Bootstrap and BlazorTable tree data display
The table supports the display of tree data
Step 1: Set IsTree to true
Step 2: Set Items or OnQueryAsync to get component data collection
Step 3: Set TreeNodeConverter to convert the component data collection into a tree structure
Step 4: Set the OnTreeExpand callback delegate to expand the response line to get the child item data set
tree data display
Open the tree table by setting IsTree
Demo
Loading...
Hierarchical indentation
Control the indent width of each layer by setting IndentSize .
Demo
In this example change the indent width to 8px
Loading...
Tree data with single table maintenance
Realize simple addition, deletion, modification and checking functions.
Demo
icon
Change the little arrow icon that indicates by setting TreeIcon
Demo
In this example change the indent width to 8px
Loading...
@inherits BootstrapComponentBase
@page "/tables/tree"
@inject IStringLocalizer<TablesTree> Localizer
<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>
<Tips class="mt-3">
<div>@((MarkupString)Localizer["P1"].Value)</div>
<ul class="ul-demo mt-3">
<li>@((MarkupString)Localizer["P2"].Value)</li>
<li>@((MarkupString)Localizer["P3"].Value)</li>
<li>@((MarkupString)Localizer["P4"].Value)</li>
<li>@((MarkupString)Localizer["P5"].Value)</li>
</ul>
</Tips>
<p>@((MarkupString)Localizer["P6"].Value)</p>
<p>@((MarkupString)Localizer["P7"].Value)</p>
<p>@((MarkupString)Localizer["P8"].Value)</p>
<p>@((MarkupString)Localizer["P9"].Value)</p>
<DemoBlock Title="@Localizer["P10"]" Introduction="@Localizer["P11"]" Name="TreeData">
<Table TItem="TreeFoo" IsBordered="true" IsStriped="true" HeaderStyle="@TableHeaderStyle.Light"
Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand">
<TableColumns>
<TableColumn @bind-Field="@context.Name" Width="360" />
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["P12"]" Introduction="@Localizer["P13"]" Name="Level">
<Tips>
<div>@((MarkupString)Localizer["P14"].Value)</div>
</Tips>
<p>@((MarkupString)Localizer["P15"].Value)</p>
<Table TItem="TreeFoo" IsBordered="true" IsStriped="true" HeaderStyle="@TableHeaderStyle.Light" IndentSize="8"
Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand">
<TableColumns>
<TableColumn @bind-Field="@context.Name" Width="360" />
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["P16"]" Introduction="@Localizer["P17"]" Name="EditTree">
<Table TItem="TreeFoo" IsBordered="true" HeaderStyle="@TableHeaderStyle.Light"
ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true" IsStriped="true"
OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"
IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand">
<TableColumns>
<TableColumn @bind-Field="@context.Id" />
<TableColumn @bind-Field="@context.Name" Width="360" />
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["P18"]" Introduction="@Localizer["P19"]" Name="Icon">
<Tips>
<div>@((MarkupString)Localizer["20"].Value)</div>
</Tips>
<p>@((MarkupString)Localizer["P21"].Value)</p>
<Table TItem="TreeFoo" IsBordered="true" IsStriped="true" HeaderStyle="@TableHeaderStyle.Light" TreeIcon="fa-solid fa-circle-chevron-right"
Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand">
<TableColumns>
<TableColumn @bind-Field="@context.Name" Width="360" />
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
</DemoBlock>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
namespace BootstrapBlazor.Shared.Samples.Table;
/// <summary>
/// 树形数据演示示例代码
/// </summary>
public partial class TablesTree
{
[NotNull]
private List<TreeFoo>? TreeItems { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
// 模拟数据从数据库中获得
TreeItems = TreeFoo.GenerateFoos(LocalizerFoo, 3);
// 插入 Id 为 1 的子项
TreeItems.AddRange(TreeFoo.GenerateFoos(LocalizerFoo, 2, 1, 100));
// 插入 Id 为 101 的子项
TreeItems.AddRange(TreeFoo.GenerateFoos(LocalizerFoo, 3, 101, 1010));
}
private static Task<IEnumerable<TableTreeNode<TreeFoo>>> TreeNodeConverter(IEnumerable<TreeFoo> items)
{
// 构造树状数据结构
var ret = BuildTreeNodes(items, 0);
return Task.FromResult(ret);
IEnumerable<TableTreeNode<TreeFoo>> BuildTreeNodes(IEnumerable<TreeFoo> items, int parentId)
{
var ret = new List<TableTreeNode<TreeFoo>>();
ret.AddRange(items.Where(i => i.ParentId == parentId).Select((foo, index) => new TableTreeNode<TreeFoo>(foo)
{
// 此处为示例，假设偶行数据都有子数据
HasChildren = index % 2 == 0,
// 如果子项集合有值 则默认展开此节点
IsExpand = items.Any(i => i.ParentId == foo.Id),
// 获得子项集合
Items = BuildTreeNodes(items.Where(i => i.ParentId == foo.Id), foo.Id)
}));
return ret;
}
}
[Inject]
[NotNull]
private ICacheManager? CacheManager { get; set; }
private Task<IEnumerable<TableTreeNode<TreeFoo>>> OnTreeExpand(TreeFoo foo) => CacheManager.GetOrCreateAsync($"{foo.Id}", async entry =>
{
// 模拟从数据库中查询
await Task.Delay(1000);
entry.SlidingExpiration = TimeSpan.FromMinutes(10);
return TreeFoo.GenerateFoos(LocalizerFoo, 2, foo.Id, foo.Id * 100).Select(i => new TableTreeNode<TreeFoo>(i));
});
private static Task<TreeFoo> OnAddAsync() => Task.FromResult(new TreeFoo() { DateTime = DateTime.Now });
private Task<bool> OnSaveAsync(TreeFoo item, ItemChangedType changedType)
{
if (changedType == ItemChangedType.Add)
{
item.Id = TreeItems.Max(i => i.Id) + 1;
TreeItems.Add(item);
}
else
{
var oldItem = TreeItems.FirstOrDefault(i => i.Id == item.Id);
if (oldItem != null)
{
oldItem.Name = item.Name;
oldItem.DateTime = item.DateTime;
oldItem.Address = item.Address;
oldItem.Count = item.Count;
}
}
return Task.FromResult(true);
}
private Task<bool> OnDeleteAsync(IEnumerable<TreeFoo> items)
{
TreeItems.RemoveAll(foo => items.Any(i => i.Id == foo.Id));
return Task.FromResult(true);
}
private Task<QueryData<TreeFoo>> OnQueryAsync(QueryPageOptions _)
{
var items = TreeFoo.GenerateFoos(LocalizerFoo, 4);
// 插入 Id 为 1 的子项
items.AddRange(TreeFoo.GenerateFoos(LocalizerFoo, 2, 1, 100));
// 插入 Id 为 101 的子项
items.AddRange(TreeFoo.GenerateFoos(LocalizerFoo, 3, 101, 1010));
var data = new QueryData<TreeFoo>()
{
Items = items
};
return Task.FromResult(data);
}
private class TreeFoo : Foo
{
public int ParentId { get; set; }
/// <summary>
///
/// </summary>
/// <returns></returns>
public static List<TreeFoo> GenerateFoos(IStringLocalizer<Foo> localizer, int count = 80, int parentId = 0, int id = 0) => Enumerable.Range(1, count).Select(i => new TreeFoo()
{
Id = id + i,
ParentId = parentId,
Name = localizer["Foo.Name", $"{id + i:d4}"],
DateTime = System.DateTime.Now.AddDays(i - 1),
Address = localizer["Foo.Address", $"{Random.Next(1000, 2000)}"],
Count = Random.Next(1, 100),
Complete = Random.Next(1, 100) > 50,
Education = Random.Next(1, 100) > 50 ? EnumEducation.Primary : EnumEducation.Middle
}).ToList();
}
}
