
Table Cell
Cell related operation example
Basic table display usage
Demo
In this example, by setting the OnCellRenderHandler
callback delegate, the cell merge operation is performed on the two columns Name
and Address
through the judgment condition, And set the background color of the merged cell by setting the TableCellArgs
attribute Class
value to cell-demo
style sheet name
.cell-demo {
background-color: #ddd;
}
Set the double-click event of the current cell by setting the OnDoubleClickColumn
callback
Demo
TableCellArgs
@page "/tables/cell"
@inject IStringLocalizer<TablesCell> CellLocalizer
<h3>@CellLocalizer["Title"]</h3>
<h4>@CellLocalizer["H4"]</h4>
<DemoBlock Title="@CellLocalizer["MergeCellTitle"]" Introduction="@CellLocalizer["MergeCellIntro"]" Name="MergeCell">
<p>@((MarkupString)CellLocalizer["MergeCellP"].Value)</p>
<Pre>.cell-demo {
background-color: #ddd;
}</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">
<Tips>
<p>@((MarkupString)CellLocalizer["OnDoubleClickCellP"].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>
// 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/
using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
namespace BootstrapBlazor.Shared.Samples.Table;
/// <summary>
///
/// </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()
{
base.OnInitialized();
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}";
}
}
}
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"],
Type = "object",
ValueList = " — ",
DefaultValue = "<TModel>"
},
new AttributeItem() {
Name = "ColumnName",
Description = CellLocalizer["ColumnNameAttr"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Colspan",
Description = CellLocalizer["ColspanAttr"],
Type = "int",
ValueList = " — ",
DefaultValue = "0"
},
new AttributeItem() {
Name = "Class",
Description = CellLocalizer["ClassAttr"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Value",
Description = CellLocalizer["ValueAttr"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
}
};
}