mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-04 21:20:16 +08:00
!3757 doc(#I6AJ33): Table component and cell-related operation example use the new code block mode
* update tablecell demos
This commit is contained in:
Lambert Lee
Argo
parent
259a52cf3d
commit
5a695634ab
@ -0,0 +1,45 @@
|
||||
@inject IStringLocalizer<Foo> Localizer
|
||||
|
||||
<div>
|
||||
<Table TItem="Foo" Items="@Items.Take(3)">
|
||||
<TableColumns>
|
||||
<TableColumn @bind-Field="@context.DateTime" Width="140" />
|
||||
<TableColumn @bind-Field="@context.Name" OnCellRender="@OnCellRenderHandler" />
|
||||
<TableColumn @bind-Field="@context.Address" />
|
||||
</TableColumns>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
/// <summary>
|
||||
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
|
||||
/// Foo class is used for Demo test, please download the source code if necessary
|
||||
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
|
||||
/// </summary>
|
||||
[NotNull]
|
||||
private List<Foo>? Items { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// OnInitialized
|
||||
/// </summary>
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
//获取随机数据
|
||||
//Get random data
|
||||
Items = Foo.GenerateFoo(Localizer);
|
||||
}
|
||||
|
||||
private static void OnCellRenderHandler(TableCellArgs args)
|
||||
{
|
||||
if (args.Row is Foo foo && args.ColumnName == "Name")
|
||||
{
|
||||
if (foo.Name == "张三 0002" || foo.Name == "Zhangsan 0002")
|
||||
{
|
||||
args.Colspan = 2;
|
||||
args.Class = "cell-demo";
|
||||
args.Value = $"{foo.Name} -- {foo.Address} -- {foo.Count}";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
@inject ToastService ToastService
|
||||
@inject IStringLocalizer<Foo> FooLocalizer
|
||||
@inject IStringLocalizer<TableCellOnDoubleClickCell> Localizer
|
||||
|
||||
<div>
|
||||
<Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" OnDoubleClickCellCallback="@OnDoubleClickCellCallback">
|
||||
<TableColumns>
|
||||
<TableColumn @bind-Field="@context.DateTime" Width="180" />
|
||||
<TableColumn @bind-Field="@context.Name" />
|
||||
<TableColumn @bind-Field="@context.Address" />
|
||||
<TableColumn @bind-Field="@context.Complete" />
|
||||
</TableColumns>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
/// <summary>
|
||||
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
|
||||
/// Foo class is used for Demo test, please download the source code if necessary
|
||||
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
|
||||
/// </summary>
|
||||
[NotNull]
|
||||
private List<Foo>? Items { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// OnInitialized
|
||||
/// </summary>
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
//获取随机数据
|
||||
//Get random data
|
||||
Items = Foo.GenerateFoo(FooLocalizer);
|
||||
}
|
||||
|
||||
private async Task OnDoubleClickCellCallback(string columnName, object row, object value)
|
||||
{
|
||||
var displayName = Utility.GetDisplayName(typeof(Foo), columnName);
|
||||
await ToastService.Show(new ToastOption()
|
||||
{
|
||||
Title = Localizer["TableCellOnDoubleClickCellToastTitle"],
|
||||
Content = $"{Localizer["TableCellOnDoubleClickCellCurrentCellName"]}{displayName} {Localizer["TableCellOnDoubleClickCellCurrentValue"]}{value}"
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -5481,22 +5481,24 @@
|
||||
"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"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.Table.TablesCell": {
|
||||
"Title": "Table Cell",
|
||||
"H4": "Cell related operation example",
|
||||
"MergeCellTitle": "Merge Cells",
|
||||
"MergeCellIntro": "Basic table display usage",
|
||||
"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",
|
||||
"OnDoubleClickCellTitle": "Double-click cell",
|
||||
"OnDoubleClickCellIntro": "Set the double-click event of the current cell by setting the <code>OnDoubleClickColumn</code> callback",
|
||||
"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",
|
||||
"TablesCellTitle": "Table Cell",
|
||||
"TablesCellDescription": "Cell related operation example",
|
||||
"TableCellMergeCellTitle": "Merge Cells",
|
||||
"TableCellMergeCellIntro": "Basic table display usage",
|
||||
"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",
|
||||
"TableCellOnDoubleClickCellTitle": "Double-click cell",
|
||||
"TableCellOnDoubleClickCellIntro": "Set the double-click event of the current cell by setting the <code>OnDoubleClickColumn</code> callback",
|
||||
"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",
|
||||
"RowAttr": "The current cell row data, please convert it into a binding model",
|
||||
"ColumnNameAttr": "Current cell binding column name",
|
||||
"ColspanAttr": "Number of merged cells",
|
||||
"ClassAttr": "Current cell style",
|
||||
"ValueAttr": "Current cell display content",
|
||||
"ToastTitle": "Double-click cell callback",
|
||||
"CurrentCellName": "Current cell name:",
|
||||
"CurrentValue": "Current Value:"
|
||||
"ValueAttr": "Current cell display content"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.Table.Cell.TableCellOnDoubleClickCell": {
|
||||
"TableCellOnDoubleClickCellToastTitle": "Double-click cell callback",
|
||||
"TableCellOnDoubleClickCellCurrentCellName": "Current cell name:",
|
||||
"TableCellOnDoubleClickCellCurrentValue": "Current Value:"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.Table.TablesLookup": {
|
||||
"Title": "Table Lookup",
|
||||
|
||||
@ -5496,22 +5496,24 @@
|
||||
"P16": "通过设置 <code>ShowAddButton</code> <code>ShowEditButton</code> <code>ShowDeleteButton</code> 属性值来控制单独功能按钮是否显示，当 <code>ShowDefaultButtons</code> 设置为 <code>false</code> 时，所有按钮均不显示"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.Table.TablesCell": {
|
||||
"Title": "Table 表格",
|
||||
"H4": "单元格相关操作示例",
|
||||
"MergeCellTitle": "合并单元格",
|
||||
"MergeCellIntro": "基础的表格展示用法",
|
||||
"MergeCellP": "本例中通过设置 <code>OnCellRenderHandler</code> 回调委托，通过判断条件对 <code>Name</code> 与 <code>Address</code> 两列进行单元格合并操作，并且通过设置 <code>TableCellArgs</code> 属性 <code>Class</code> 值为 <code>cell-demo</code> 样式表名称对合并后单元格进行背景色设置",
|
||||
"OnDoubleClickCellTitle": "双击单元格",
|
||||
"OnDoubleClickCellIntro": "通过设置 <code>OnDoubleClickColumn</code> 回调，设置当前单元格的双击事件",
|
||||
"OnDoubleClickCellP": "设置双击单元格回调后，鼠标悬停单元格后单元格出现下标横线，以作提示可通过 <code>.table-cell .is-dbcell</code> 样式覆盖",
|
||||
"TablesCellTitle": "Table 表格",
|
||||
"TablesCellDescription": "单元格相关操作示例",
|
||||
"TableCellMergeCellTitle": "合并单元格",
|
||||
"TableCellMergeCellIntro": "基础的表格展示用法",
|
||||
"TableCellMergeCellTip": "本例中通过设置 <code>OnCellRenderHandler</code> 回调委托，通过判断条件对 <code>Name</code> 与 <code>Address</code> 两列进行单元格合并操作，并且通过设置 <code>TableCellArgs</code> 属性 <code>Class</code> 值为 <code>cell-demo</code> 样式表名称对合并后单元格进行背景色设置",
|
||||
"TableCellOnDoubleClickCellTitle": "双击单元格",
|
||||
"TableCellOnDoubleClickCellIntro": "通过设置 <code>OnDoubleClickColumn</code> 回调，设置当前单元格的双击事件",
|
||||
"TableCellOnDoubleClickCellTip": "设置双击单元格回调后，鼠标悬停单元格后单元格出现下标横线，以作提示可通过 <code>.table-cell .is-dbcell</code> 样式覆盖",
|
||||
"RowAttr": "当前单元格行数据 请自行转化为绑定模型",
|
||||
"ColumnNameAttr": "当前单元格绑定列名称",
|
||||
"ColspanAttr": "合并单元格数量",
|
||||
"ClassAttr": "当前单元格样式",
|
||||
"ValueAttr": "当前单元格显示内容",
|
||||
"ToastTitle": "双击单元格回调",
|
||||
"CurrentCellName": "当前单元格名称：",
|
||||
"CurrentValue": "当前值："
|
||||
"ValueAttr": "当前单元格显示内容"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.Table.Cell.TableCellOnDoubleClickCell": {
|
||||
"TableCellOnDoubleClickCellToastTitle": "双击单元格回调",
|
||||
"TableCellOnDoubleClickCellCurrentCellName": "当前单元格名称：",
|
||||
"TableCellOnDoubleClickCellCurrentValue": "当前值："
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.Table.TablesLookup": {
|
||||
"Title": "Table 表格",
|
||||
|
||||
@ -7,36 +7,21 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<h3>@CellLocalizer["Title"]</h3>
|
||||
<h3>@CellLocalizer["TablesCellTitle"]</h3>
|
||||
|
||||
<h4>@CellLocalizer["H4"]</h4>
|
||||
<h4>@CellLocalizer["TablesCellDescription"]</h4>
|
||||
|
||||
<DemoBlock Title="@CellLocalizer["MergeCellTitle"]" Introduction="@CellLocalizer["MergeCellIntro"]" Name="MergeCell">
|
||||
<p>@((MarkupString)CellLocalizer["MergeCellP"].Value)</p>
|
||||
<DemoBlock Title="@CellLocalizer["TableCellMergeCellTitle"]" Introduction="@CellLocalizer["TableCellMergeCellIntro"]" Name="MergeCell" Demo="typeof(Demos.Table.Cell.TableCellMergeCell)">
|
||||
<p>@((MarkupString)CellLocalizer["TableCellMergeCellTip"].Value)</p>
|
||||
<Pre>.cell-demo {
|
||||
--bs-table-bg: ##e9ecef;
|
||||
}</Pre>
|
||||
<Table TItem="Foo" Items="@Items.Take(3)">
|
||||
<TableColumns>
|
||||
<TableColumn @bind-Field="@context.DateTime" Width="140" />
|
||||
<TableColumn @bind-Field="@context.Name" OnCellRender="@OnCellRenderHandler" />
|
||||
<TableColumn @bind-Field="@context.Address" />
|
||||
</TableColumns>
|
||||
</Table>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@CellLocalizer["OnDoubleClickCellTitle"]" Introduction="@CellLocalizer["OnDoubleClickCellIntro"]" Name="OnDoubleClickCell">
|
||||
<DemoBlock Title="@CellLocalizer["TableCellOnDoubleClickCellTitle"]" Introduction="@CellLocalizer["TableCellOnDoubleClickCellIntro"]" Name="OnDoubleClickCell" Demo="typeof(Demos.Table.Cell.TableCellOnDoubleClickCell)">
|
||||
<Tips>
|
||||
<p>@((MarkupString)CellLocalizer["OnDoubleClickCellP"].Value)</p>
|
||||
<p>@((MarkupString)CellLocalizer["TableCellOnDoubleClickCellTip"].Value)</p>
|
||||
</Tips>
|
||||
<Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" OnDoubleClickCellCallback="@OnDoubleClickCellCallback">
|
||||
<TableColumns>
|
||||
<TableColumn @bind-Field="@context.DateTime" Width="180" />
|
||||
<TableColumn @bind-Field="@context.Name" />
|
||||
<TableColumn @bind-Field="@context.Address" />
|
||||
<TableColumn @bind-Field="@context.Complete" />
|
||||
</TableColumns>
|
||||
</Table>
|
||||
</DemoBlock>
|
||||
|
||||
<AttributeTable Items="GetAttributes()" Title="TableCellArgs"></AttributeTable>
|
||||
<AttributeTable Items="GetAttributes()" Title="TableCellArgs" />
|
||||
|
||||
@ -5,52 +5,14 @@
|
||||
namespace BootstrapBlazor.Shared.Samples.Table;
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// TablesCell
|
||||
/// </summary>
|
||||
public partial class TablesCell
|
||||
{
|
||||
[Inject]
|
||||
[NotNull]
|
||||
private IStringLocalizer<Foo>? Localizer { get; set; }
|
||||
|
||||
[Inject]
|
||||
[NotNull]
|
||||
private ToastService? ToastService { get; set; }
|
||||
|
||||
[NotNull]
|
||||
private List<Foo>? Items { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// OnInitialized 方法
|
||||
/// </summary>
|
||||
protected override void OnInitialized()
|
||||
private IEnumerable<AttributeItem> GetAttributes()
|
||||
{
|
||||
base.OnInitialized();
|
||||
|
||||
Items = Foo.GenerateFoo(Localizer);
|
||||
}
|
||||
|
||||
private static void OnCellRenderHandler(TableCellArgs args)
|
||||
{
|
||||
if (args.Row is Foo foo && args.ColumnName == "Name")
|
||||
return new[]
|
||||
{
|
||||
if (foo.Name == "张三 0002" || foo.Name == "Zhangsan 0002")
|
||||
{
|
||||
args.Colspan = 2;
|
||||
args.Class = "cell-demo";
|
||||
args.Value = $"{foo.Name} -- {foo.Address} -- {foo.Count}";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async Task OnDoubleClickCellCallback(string columnName, object row, object value)
|
||||
{
|
||||
var displayName = Utility.GetDisplayName(typeof(Foo), columnName);
|
||||
await ToastService.Show(new ToastOption() { Title = CellLocalizer["ToastTitle"], Content = $"{CellLocalizer["CurrentCellName"]}{displayName} {CellLocalizer["CurrentValue"]}{value}" });
|
||||
}
|
||||
|
||||
private IEnumerable<AttributeItem> GetAttributes() => new[]
|
||||
{
|
||||
new AttributeItem() {
|
||||
Name = "Row",
|
||||
Description = CellLocalizer["RowAttr"],
|
||||
@ -87,4 +49,5 @@ public partial class TablesCell
|
||||
DefaultValue = " — "
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user