Skip to content

Commit 4533488

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3779 doc(#I6B4T0): update TableLoading demos
Co-authored-by: lambert lee <1708416@qq.com>
1 parent 5c6d7f5 commit 4533488

6 files changed

Lines changed: 363 additions & 62 deletions

File tree

src/BootstrapBlazor.Shared/Samples/Table/TablesLoading.razor.cs renamed to src/BootstrapBlazor.Shared/Demos/Table/TablesLoading/TablesLoadingShowLoading.razor

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
1-
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
2-
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
3-
// Website: https://www.blazor.zone or https://argozhang.github.io/
4-
5-
namespace BootstrapBlazor.Shared.Samples.Table;
6-
7-
/// <summary>
8-
///
9-
/// </summary>
10-
public partial class TablesLoading
11-
{
12-
[Inject]
13-
[NotNull]
14-
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
1+
@inject IStringLocalizer<Foo> LocalizerFoo
2+
3+
<div>
4+
<Table TItem="Foo" PageItemsSource="@PageItemsSource" AutoGenerateColumns="true"
5+
IsPagination="true" IsStriped="true" IsBordered="true" IsMultipleSelect="true"
6+
ShowToolbar="true" ShowExtendButtons="true" ShowLoading="true" ShowSearch="true"
7+
OnAddAsync="@OnAddAsync" OnEditAsync="@OnEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"
8+
OnQueryAsync="@OnQueryAsync">
9+
<TableColumns>
10+
<TableColumn @bind-Field="@context.Hobby" Items="@Hobbys" />
11+
</TableColumns>
12+
</Table>
13+
</div>
14+
15+
@code {
1516

1617
private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };
1718

1819
[NotNull]
1920
private IEnumerable<SelectedItem>? Hobbys { get; set; }
2021

22+
/// <summary>
23+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
24+
/// Foo class is used for Demo test, please download the source code if necessary
25+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
26+
/// </summary>
2127
[NotNull]
2228
private List<Foo>? Items { get; set; }
2329

‎src/BootstrapBlazor.Shared/Demos/Table/TablesLoading/TablesLoadingShowLoadingInFirstRender.razor‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
@inject IStringLocalizer<Foo> LocalizerFoo
2+
3+
<div>
4+
<Table TItem="Foo" PageItemsSource="@PageItemsSource" AutoGenerateColumns="true"
5+
IsPagination="true" IsStriped="true" IsBordered="true" IsMultipleSelect="true"
6+
ShowToolbar="true" ShowExtendButtons="true" ShowLoadingInFirstRender="false" ShowLoading="false" ShowSearch="true"
7+
OnAddAsync="@OnAddAsync" OnEditAsync="@OnEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"
8+
OnQueryAsync="@OnQueryAsync">
9+
<TableColumns>
10+
<TableColumn @bind-Field="@context.Hobby" Items="@Hobbys" />
11+
</TableColumns>
12+
</Table>
13+
</div>
14+
15+
@code {
16+
17+
private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };
18+
19+
[NotNull]
20+
private IEnumerable<SelectedItem>? Hobbys { get; set; }
21+
22+
/// <summary>
23+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
24+
/// Foo class is used for Demo test, please download the source code if necessary
25+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
26+
/// </summary>
27+
[NotNull]
28+
private List<Foo>? Items { get; set; }
29+
30+
/// <summary>
31+
/// OnInitialized 方法
32+
/// </summary>
33+
protected override void OnInitialized()
34+
{
35+
base.OnInitialized();
36+
37+
Hobbys = Foo.GenerateHobbys(LocalizerFoo);
38+
Items = Foo.GenerateFoo(LocalizerFoo);
39+
}
40+
41+
private static async Task<Foo> OnAddAsync()
42+
{
43+
// 模拟延时
44+
await Task.Delay(1000);
45+
return new Foo() { DateTime = DateTime.Now };
46+
}
47+
48+
private static async Task<Foo> OnEditAsync(Foo item)
49+
{
50+
// 模拟延时
51+
await Task.Delay(1000);
52+
return item;
53+
}
54+
55+
private async Task<bool> OnSaveAsync(Foo item, ItemChangedType changedType)
56+
{
57+
// 模拟延时
58+
await Task.Delay(1000);
59+
if (changedType == ItemChangedType.Add)
60+
{
61+
item.Id = Items.Max(i => i.Id) + 1;
62+
Items.Add(item);
63+
}
64+
else
65+
{
66+
var oldItem = Items.FirstOrDefault(i => i.Id == item.Id);
67+
if (oldItem != null)
68+
{
69+
oldItem.Name = item.Name;
70+
oldItem.Address = item.Address;
71+
oldItem.DateTime = item.DateTime;
72+
oldItem.Count = item.Count;
73+
oldItem.Complete = item.Complete;
74+
oldItem.Education = item.Education;
75+
}
76+
}
77+
return true;
78+
}
79+
80+
private async Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
81+
{
82+
// 模拟延时
83+
await Task.Delay(1000);
84+
items.ToList().ForEach(i => Items.Remove(i));
85+
return true;
86+
}
87+
88+
private async Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
89+
{
90+
// 模拟延时
91+
await Task.Delay(1000);
92+
93+
IEnumerable<Foo> items = Items;
94+
95+
// 处理高级搜索
96+
var searchModel = options.SearchModel as Foo;
97+
var isSearch = false;
98+
if (!string.IsNullOrEmpty(searchModel?.Name))
99+
{
100+
items = items.Where(item => item.Name?.Contains(searchModel.Name, StringComparison.OrdinalIgnoreCase) ?? false);
101+
isSearch = true;
102+
}
103+
104+
if (!string.IsNullOrEmpty(searchModel?.Address))
105+
{
106+
items = items.Where(item => item.Address?.Contains(searchModel.Address, StringComparison.OrdinalIgnoreCase) ?? false);
107+
isSearch = true;
108+
}
109+
110+
// 处理 Searchable=true 列与 SeachText 模糊搜索
111+
if (options.Searchs.Any())
112+
{
113+
items = items.Where(options.Searchs.GetFilterFunc<Foo>(FilterLogic.Or));
114+
}
115+
else
116+
{
117+
// 处理 SearchText 模糊搜索
118+
if (!string.IsNullOrEmpty(options.SearchText))
119+
{
120+
items = items.Where(item => (item.Name?.Contains(options.SearchText) ?? false)
121+
|| (item.Address?.Contains(options.SearchText) ?? false));
122+
}
123+
}
124+
125+
// 过滤
126+
var isFiltered = false;
127+
if (options.Filters.Any())
128+
{
129+
items = items.Where(options.Filters.GetFilterFunc<Foo>());
130+
isFiltered = true;
131+
}
132+
133+
// 排序
134+
var isSorted = false;
135+
if (!string.IsNullOrEmpty(options.SortName))
136+
{
137+
var invoker = Foo.GetNameSortFunc();
138+
items = invoker(items, options.SortName, options.SortOrder);
139+
isSorted = true;
140+
}
141+
142+
// 设置记录总数
143+
var total = items.Count();
144+
145+
// 内存分页
146+
items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
147+
148+
return new QueryData<Foo>()
149+
{
150+
Items = items,
151+
TotalCount = total,
152+
IsSorted = isSorted,
153+
IsFiltered = isFiltered,
154+
IsSearch = isSearch
155+
};
156+
}
157+
}

‎src/BootstrapBlazor.Shared/Demos/Table/TablesLoading/TablesLoadingShowSkeleton.razor‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
@inject IStringLocalizer<Foo> LocalizerFoo
2+
3+
<div>
4+
<Table TItem="Foo" PageItemsSource="@PageItemsSource" AutoGenerateColumns="true"
5+
IsPagination="true" IsStriped="true" IsBordered="true" IsMultipleSelect="true"
6+
ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true" ShowSearch="true"
7+
OnAddAsync="@OnAddAsync" OnEditAsync="@OnEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"
8+
OnQueryAsync="@OnQueryAsync">
9+
<TableColumns>
10+
<TableColumn @bind-Field="@context.Hobby" Items="@Hobbys" />
11+
</TableColumns>
12+
</Table>
13+
</div>
14+
15+
@code {
16+
17+
private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };
18+
19+
[NotNull]
20+
private IEnumerable<SelectedItem>? Hobbys { get; set; }
21+
22+
/// <summary>
23+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
24+
/// Foo class is used for Demo test, please download the source code if necessary
25+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
26+
/// </summary>
27+
[NotNull]
28+
private List<Foo>? Items { get; set; }
29+
30+
/// <summary>
31+
/// OnInitialized 方法
32+
/// </summary>
33+
protected override void OnInitialized()
34+
{
35+
base.OnInitialized();
36+
37+
Hobbys = Foo.GenerateHobbys(LocalizerFoo);
38+
Items = Foo.GenerateFoo(LocalizerFoo);
39+
}
40+
41+
private static async Task<Foo> OnAddAsync()
42+
{
43+
// 模拟延时
44+
await Task.Delay(1000);
45+
return new Foo() { DateTime = DateTime.Now };
46+
}
47+
48+
private static async Task<Foo> OnEditAsync(Foo item)
49+
{
50+
// 模拟延时
51+
await Task.Delay(1000);
52+
return item;
53+
}
54+
55+
private async Task<bool> OnSaveAsync(Foo item, ItemChangedType changedType)
56+
{
57+
// 模拟延时
58+
await Task.Delay(1000);
59+
if (changedType == ItemChangedType.Add)
60+
{
61+
item.Id = Items.Max(i => i.Id) + 1;
62+
Items.Add(item);
63+
}
64+
else
65+
{
66+
var oldItem = Items.FirstOrDefault(i => i.Id == item.Id);
67+
if (oldItem != null)
68+
{
69+
oldItem.Name = item.Name;
70+
oldItem.Address = item.Address;
71+
oldItem.DateTime = item.DateTime;
72+
oldItem.Count = item.Count;
73+
oldItem.Complete = item.Complete;
74+
oldItem.Education = item.Education;
75+
}
76+
}
77+
return true;
78+
}
79+
80+
private async Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
81+
{
82+
// 模拟延时
83+
await Task.Delay(1000);
84+
items.ToList().ForEach(i => Items.Remove(i));
85+
return true;
86+
}
87+
88+
private async Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
89+
{
90+
// 模拟延时
91+
await Task.Delay(1000);
92+
93+
IEnumerable<Foo> items = Items;
94+
95+
// 处理高级搜索
96+
var searchModel = options.SearchModel as Foo;
97+
var isSearch = false;
98+
if (!string.IsNullOrEmpty(searchModel?.Name))
99+
{
100+
items = items.Where(item => item.Name?.Contains(searchModel.Name, StringComparison.OrdinalIgnoreCase) ?? false);
101+
isSearch = true;
102+
}
103+
104+
if (!string.IsNullOrEmpty(searchModel?.Address))
105+
{
106+
items = items.Where(item => item.Address?.Contains(searchModel.Address, StringComparison.OrdinalIgnoreCase) ?? false);
107+
isSearch = true;
108+
}
109+
110+
// 处理 Searchable=true 列与 SeachText 模糊搜索
111+
if (options.Searchs.Any())
112+
{
113+
items = items.Where(options.Searchs.GetFilterFunc<Foo>(FilterLogic.Or));
114+
}
115+
else
116+
{
117+
// 处理 SearchText 模糊搜索
118+
if (!string.IsNullOrEmpty(options.SearchText))
119+
{
120+
items = items.Where(item => (item.Name?.Contains(options.SearchText) ?? false)
121+
|| (item.Address?.Contains(options.SearchText) ?? false));
122+
}
123+
}
124+
125+
// 过滤
126+
var isFiltered = false;
127+
if (options.Filters.Any())
128+
{
129+
items = items.Where(options.Filters.GetFilterFunc<Foo>());
130+
isFiltered = true;
131+
}
132+
133+
// 排序
134+
var isSorted = false;
135+
if (!string.IsNullOrEmpty(options.SortName))
136+
{
137+
var invoker = Foo.GetNameSortFunc();
138+
items = invoker(items, options.SortName, options.SortOrder);
139+
isSorted = true;
140+
}
141+
142+
// 设置记录总数
143+
var total = items.Count();
144+
145+
// 内存分页
146+
items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
147+
148+
return new QueryData<Foo>()
149+
{
150+
Items = items,
151+
TotalCount = total,
152+
IsSorted = isSorted,
153+
IsFiltered = isFiltered,
154+
IsSearch = isSearch
155+
};
156+
}
157+
}

‎src/BootstrapBlazor.Shared/Locales/en.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5309,14 +5309,14 @@
53095309
"VirtMultiSelectsualizationDynamicDescription": "Display row placeholders when scrolling quickly to improve user experience"
53105310
},
53115311
"BootstrapBlazor.Shared.Samples.Table.TablesLoading": {
5312-
"H1": "Display data loading function",
5313-
"H2": "When calling the remote data interface, there may be a delay due to network reasons, you can use the display loading function to shield",
5314-
"P1": "Basic usage",
5315-
"P2": "Just set <code>ShowLoading</code>",
5316-
"P3": "Skeleton screen",
5317-
"P4": "Set <code>ShowSkeleton</code> to",
5318-
"P5": "Turn off loading animation",
5319-
"P6": "Just set <code>ShowLoadingInFirstRender</code>"
5312+
"TablesLoadingTitile": "Display data loading function",
5313+
"TablesLoadingDescription": "When calling the remote data interface, there may be a delay due to network reasons, you can use the display loading function to shield",
5314+
"TablesLoadingShowLoadingTitle": "Basic usage",
5315+
"TablesLoadingShowLoadingIntro": "Just set <code>ShowLoading</code>",
5316+
"TablesLoadingShowSkeletonTitle": "Skeleton screen",
5317+
"TablesLoadingShowSkeletonIntro": "Set <code>ShowSkeleton</code> to",
5318+
"TablesLoadingShowLoadingInFirstRenderTitle": "Turn off loading animation",
5319+
"TablesLoadingShowLoadingInFirstRenderIntro": "Just set <code>ShowLoadingInFirstRender</code>"
53205320
},
53215321
"BootstrapBlazor.Shared.Samples.Table.TablesTree": {
53225322
"H1": "Table tree data display",

0 commit comments

Comments
 (0)