Skip to content

Commit 5a69563

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3757 doc(#I6AJ33): Table component and cell-related operation example use the new code block mode
* update tablecell demos
1 parent 259a52c commit 5a69563

6 files changed

Lines changed: 129 additions & 87 deletions

File tree

‎src/BootstrapBlazor.Shared/Demos/Table/Cell/TableCellMergeCell.razor‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@inject IStringLocalizer<Foo> Localizer
2+
3+
<div>
4+
<Table TItem="Foo" Items="@Items.Take(3)">
5+
<TableColumns>
6+
<TableColumn @bind-Field="@context.DateTime" Width="140" />
7+
<TableColumn @bind-Field="@context.Name" OnCellRender="@OnCellRenderHandler" />
8+
<TableColumn @bind-Field="@context.Address" />
9+
</TableColumns>
10+
</Table>
11+
</div>
12+
13+
@code {
14+
/// <summary>
15+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
16+
/// Foo class is used for Demo test, please download the source code if necessary
17+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
18+
/// </summary>
19+
[NotNull]
20+
private List<Foo>? Items { get; set; }
21+
22+
/// <summary>
23+
/// OnInitialized
24+
/// </summary>
25+
protected override void OnInitialized()
26+
{
27+
base.OnInitialized();
28+
//获取随机数据
29+
//Get random data
30+
Items = Foo.GenerateFoo(Localizer);
31+
}
32+
33+
private static void OnCellRenderHandler(TableCellArgs args)
34+
{
35+
if (args.Row is Foo foo && args.ColumnName == "Name")
36+
{
37+
if (foo.Name == "张三 0002" || foo.Name == "Zhangsan 0002")
38+
{
39+
args.Colspan = 2;
40+
args.Class = "cell-demo";
41+
args.Value = $"{foo.Name} -- {foo.Address} -- {foo.Count}";
42+
}
43+
}
44+
}
45+
}

‎src/BootstrapBlazor.Shared/Demos/Table/Cell/TableCellOnDoubleClickCell.razor‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@inject ToastService ToastService
2+
@inject IStringLocalizer<Foo> FooLocalizer
3+
@inject IStringLocalizer<TableCellOnDoubleClickCell> Localizer
4+
5+
<div>
6+
<Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" OnDoubleClickCellCallback="@OnDoubleClickCellCallback">
7+
<TableColumns>
8+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
9+
<TableColumn @bind-Field="@context.Name" />
10+
<TableColumn @bind-Field="@context.Address" />
11+
<TableColumn @bind-Field="@context.Complete" />
12+
</TableColumns>
13+
</Table>
14+
</div>
15+
16+
@code {
17+
/// <summary>
18+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
19+
/// Foo class is used for Demo test, please download the source code if necessary
20+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
21+
/// </summary>
22+
[NotNull]
23+
private List<Foo>? Items { get; set; }
24+
25+
/// <summary>
26+
/// OnInitialized
27+
/// </summary>
28+
protected override void OnInitialized()
29+
{
30+
base.OnInitialized();
31+
//获取随机数据
32+
//Get random data
33+
Items = Foo.GenerateFoo(FooLocalizer);
34+
}
35+
36+
private async Task OnDoubleClickCellCallback(string columnName, object row, object value)
37+
{
38+
var displayName = Utility.GetDisplayName(typeof(Foo), columnName);
39+
await ToastService.Show(new ToastOption()
40+
{
41+
Title = Localizer["TableCellOnDoubleClickCellToastTitle"],
42+
Content = $"{Localizer["TableCellOnDoubleClickCellCurrentCellName"]}{displayName} {Localizer["TableCellOnDoubleClickCellCurrentValue"]}{value}"
43+
});
44+
}
45+
}

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5481,22 +5481,24 @@
54815481
"P16": "By setting the <code>ShowAddButton</code> <code>ShowEditButton</code> <code>ShowDeleteButton</code> attribute value to control whether the individual function button is displayed, when <code>ShowDefaultButtons</code> is set to <code> When false</code>, all buttons are not displayed"
54825482
},
54835483
"BootstrapBlazor.Shared.Samples.Table.TablesCell": {
5484-
"Title": "Table Cell",
5485-
"H4": "Cell related operation example",
5486-
"MergeCellTitle": "Merge Cells",
5487-
"MergeCellIntro": "Basic table display usage",
5488-
"MergeCellP": "In this example, by setting the <code>OnCellRenderHandler</code> callback delegate, the cell merge operation is performed on the two columns <code>Name</code> and <code>Address</code> through the judgment condition, And set the background color of the merged cell by setting the <code>TableCellArgs</code> attribute <code>Class</code> value to <code>cell-demo</code> style sheet name",
5489-
"OnDoubleClickCellTitle": "Double-click cell",
5490-
"OnDoubleClickCellIntro": "Set the double-click event of the current cell by setting the <code>OnDoubleClickColumn</code> callback",
5491-
"OnDoubleClickCellP": "After setting the double-click cell callback, a subscript horizontal line appears in the cell after the mouse hovers over the cell, as a reminder, which can be overridden by the <code>.table-cell .is-dbcell</code> style",
5484+
"TablesCellTitle": "Table Cell",
5485+
"TablesCellDescription": "Cell related operation example",
5486+
"TableCellMergeCellTitle": "Merge Cells",
5487+
"TableCellMergeCellIntro": "Basic table display usage",
5488+
"TableCellMergeCellTip": "In this example, by setting the <code>OnCellRenderHandler</code> callback delegate, the cell merge operation is performed on the two columns <code>Name</code> and <code>Address</code> through the judgment condition, And set the background color of the merged cell by setting the <code>TableCellArgs</code> attribute <code>Class</code> value to <code>cell-demo</code> style sheet name",
5489+
"TableCellOnDoubleClickCellTitle": "Double-click cell",
5490+
"TableCellOnDoubleClickCellIntro": "Set the double-click event of the current cell by setting the <code>OnDoubleClickColumn</code> callback",
5491+
"TableCellOnDoubleClickCellTip": "After setting the double-click cell callback, a subscript horizontal line appears in the cell after the mouse hovers over the cell, as a reminder, which can be overridden by the <code>.table-cell .is-dbcell</code> style",
54925492
"RowAttr": "The current cell row data, please convert it into a binding model",
54935493
"ColumnNameAttr": "Current cell binding column name",
54945494
"ColspanAttr": "Number of merged cells",
54955495
"ClassAttr": "Current cell style",
5496-
"ValueAttr": "Current cell display content",
5497-
"ToastTitle": "Double-click cell callback",
5498-
"CurrentCellName": "Current cell name:",
5499-
"CurrentValue": "Current Value:"
5496+
"ValueAttr": "Current cell display content"
5497+
},
5498+
"BootstrapBlazor.Shared.Demos.Table.Cell.TableCellOnDoubleClickCell": {
5499+
"TableCellOnDoubleClickCellToastTitle": "Double-click cell callback",
5500+
"TableCellOnDoubleClickCellCurrentCellName": "Current cell name:",
5501+
"TableCellOnDoubleClickCellCurrentValue": "Current Value:"
55005502
},
55015503
"BootstrapBlazor.Shared.Samples.Table.TablesLookup": {
55025504
"Title": "Table Lookup",

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5496,22 +5496,24 @@
54965496
"P16": "通过设置 <code>ShowAddButton</code> <code>ShowEditButton</code> <code>ShowDeleteButton</code> 属性值来控制单独功能按钮是否显示，当 <code>ShowDefaultButtons</code> 设置为 <code>false</code> 时，所有按钮均不显示"
54975497
},
54985498
"BootstrapBlazor.Shared.Samples.Table.TablesCell": {
5499-
"Title": "Table 表格",
5500-
"H4": "单元格相关操作示例",
5501-
"MergeCellTitle": "合并单元格",
5502-
"MergeCellIntro": "基础的表格展示用法",
5503-
"MergeCellP": "本例中通过设置 <code>OnCellRenderHandler</code> 回调委托，通过判断条件对 <code>Name</code> 与 <code>Address</code> 两列进行单元格合并操作，并且通过设置 <code>TableCellArgs</code> 属性 <code>Class</code> 值为 <code>cell-demo</code> 样式表名称对合并后单元格进行背景色设置",
5504-
"OnDoubleClickCellTitle": "双击单元格",
5505-
"OnDoubleClickCellIntro": "通过设置 <code>OnDoubleClickColumn</code> 回调，设置当前单元格的双击事件",
5506-
"OnDoubleClickCellP": "设置双击单元格回调后，鼠标悬停单元格后单元格出现下标横线，以作提示可通过 <code>.table-cell .is-dbcell</code> 样式覆盖",
5499+
"TablesCellTitle": "Table 表格",
5500+
"TablesCellDescription": "单元格相关操作示例",
5501+
"TableCellMergeCellTitle": "合并单元格",
5502+
"TableCellMergeCellIntro": "基础的表格展示用法",
5503+
"TableCellMergeCellTip": "本例中通过设置 <code>OnCellRenderHandler</code> 回调委托，通过判断条件对 <code>Name</code> 与 <code>Address</code> 两列进行单元格合并操作，并且通过设置 <code>TableCellArgs</code> 属性 <code>Class</code> 值为 <code>cell-demo</code> 样式表名称对合并后单元格进行背景色设置",
5504+
"TableCellOnDoubleClickCellTitle": "双击单元格",
5505+
"TableCellOnDoubleClickCellIntro": "通过设置 <code>OnDoubleClickColumn</code> 回调，设置当前单元格的双击事件",
5506+
"TableCellOnDoubleClickCellTip": "设置双击单元格回调后，鼠标悬停单元格后单元格出现下标横线，以作提示可通过 <code>.table-cell .is-dbcell</code> 样式覆盖",
55075507
"RowAttr": "当前单元格行数据 请自行转化为绑定模型",
55085508
"ColumnNameAttr": "当前单元格绑定列名称",
55095509
"ColspanAttr": "合并单元格数量",
55105510
"ClassAttr": "当前单元格样式",
5511-
"ValueAttr": "当前单元格显示内容",
5512-
"ToastTitle": "双击单元格回调",
5513-
"CurrentCellName": "当前单元格名称：",
5514-
"CurrentValue": "当前值："
5511+
"ValueAttr": "当前单元格显示内容"
5512+
},
5513+
"BootstrapBlazor.Shared.Demos.Table.Cell.TableCellOnDoubleClickCell": {
5514+
"TableCellOnDoubleClickCellToastTitle": "双击单元格回调",
5515+
"TableCellOnDoubleClickCellCurrentCellName": "当前单元格名称：",
5516+
"TableCellOnDoubleClickCellCurrentValue": "当前值："
55155517
},
55165518
"BootstrapBlazor.Shared.Samples.Table.TablesLookup": {
55175519
"Title": "Table 表格",

‎src/BootstrapBlazor.Shared/Samples/Table/TablesCell.razor‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,21 @@
77
}
88
</style>
99

10-
<h3>@CellLocalizer["Title"]</h3>
10+
<h3>@CellLocalizer["TablesCellTitle"]</h3>
1111

12-
<h4>@CellLocalizer["H4"]</h4>
12+
<h4>@CellLocalizer["TablesCellDescription"]</h4>
1313

14-
<DemoBlock Title="@CellLocalizer["MergeCellTitle"]" Introduction="@CellLocalizer["MergeCellIntro"]" Name="MergeCell">
15-
<p>@((MarkupString)CellLocalizer["MergeCellP"].Value)</p>
14+
<DemoBlock Title="@CellLocalizer["TableCellMergeCellTitle"]" Introduction="@CellLocalizer["TableCellMergeCellIntro"]" Name="MergeCell" Demo="typeof(Demos.Table.Cell.TableCellMergeCell)">
15+
<p>@((MarkupString)CellLocalizer["TableCellMergeCellTip"].Value)</p>
1616
<Pre>.cell-demo {
1717
--bs-table-bg: ##e9ecef;
1818
}</Pre>
19-
<Table TItem="Foo" Items="@Items.Take(3)">
20-
<TableColumns>
21-
<TableColumn @bind-Field="@context.DateTime" Width="140" />
22-
<TableColumn @bind-Field="@context.Name" OnCellRender="@OnCellRenderHandler" />
23-
<TableColumn @bind-Field="@context.Address" />
24-
</TableColumns>
25-
</Table>
2619
</DemoBlock>
2720

28-
<DemoBlock Title="@CellLocalizer["OnDoubleClickCellTitle"]" Introduction="@CellLocalizer["OnDoubleClickCellIntro"]" Name="OnDoubleClickCell">
21+
<DemoBlock Title="@CellLocalizer["TableCellOnDoubleClickCellTitle"]" Introduction="@CellLocalizer["TableCellOnDoubleClickCellIntro"]" Name="OnDoubleClickCell" Demo="typeof(Demos.Table.Cell.TableCellOnDoubleClickCell)">
2922
<Tips>
30-
<p>@((MarkupString)CellLocalizer["OnDoubleClickCellP"].Value)</p>
23+
<p>@((MarkupString)CellLocalizer["TableCellOnDoubleClickCellTip"].Value)</p>
3124
</Tips>
32-
<Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" OnDoubleClickCellCallback="@OnDoubleClickCellCallback">
33-
<TableColumns>
34-
<TableColumn @bind-Field="@context.DateTime" Width="180" />
35-
<TableColumn @bind-Field="@context.Name" />
36-
<TableColumn @bind-Field="@context.Address" />
37-
<TableColumn @bind-Field="@context.Complete" />
38-
</TableColumns>
39-
</Table>
4025
</DemoBlock>
4126

42-
<AttributeTable Items="GetAttributes()" Title="TableCellArgs"></AttributeTable>
27+
<AttributeTable Items="GetAttributes()" Title="TableCellArgs" />

‎src/BootstrapBlazor.Shared/Samples/Table/TablesCell.razor.cs‎

Lines changed: 4 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,52 +5,14 @@
55
namespace BootstrapBlazor.Shared.Samples.Table;
66

77
/// <summary>
8-
///
8+
/// TablesCell
99
/// </summary>
1010
public partial class TablesCell
1111
{
12-
[Inject]
13-
[NotNull]
14-
private IStringLocalizer<Foo>? Localizer { get; set; }
15-
16-
[Inject]
17-
[NotNull]
18-
private ToastService? ToastService { get; set; }
19-
20-
[NotNull]
21-
private List<Foo>? Items { get; set; }
22-
23-
/// <summary>
24-
/// OnInitialized 方法
25-
/// </summary>
26-
protected override void OnInitialized()
27-
{
28-
base.OnInitialized();
29-
30-
Items = Foo.GenerateFoo(Localizer);
31-
}
32-
33-
private static void OnCellRenderHandler(TableCellArgs args)
12+
private IEnumerable<AttributeItem> GetAttributes()
3413
{
35-
if (args.Row is Foo foo && args.ColumnName == "Name")
14+
return new[]
3615
{
37-
if (foo.Name == "张三 0002" || foo.Name == "Zhangsan 0002")
38-
{
39-
args.Colspan = 2;
40-
args.Class = "cell-demo";
41-
args.Value = $"{foo.Name} -- {foo.Address} -- {foo.Count}";
42-
}
43-
}
44-
}
45-
46-
private async Task OnDoubleClickCellCallback(string columnName, object row, object value)
47-
{
48-
var displayName = Utility.GetDisplayName(typeof(Foo), columnName);
49-
await ToastService.Show(new ToastOption() { Title = CellLocalizer["ToastTitle"], Content = $"{CellLocalizer["CurrentCellName"]}{displayName} {CellLocalizer["CurrentValue"]}{value}" });
50-
}
51-
52-
private IEnumerable<AttributeItem> GetAttributes() => new[]
53-
{
5416
new AttributeItem() {
5517
Name = "Row",
5618
Description = CellLocalizer["RowAttr"],
@@ -87,4 +49,5 @@ private IEnumerable<AttributeItem> GetAttributes() => new[]
8749
DefaultValue = " — "
8850
}
8951
};
52+
}
9053
}

0 commit comments

Comments
 (0)