Enterprise-level component library based on Bootstrap and BlazorTable Row
Used to display multiple pieces of data with similar structures, data can be sorted, filtered, compared or other custom operations.
By setting the ShowLineNo property to true, the table displays the row number, the default value is false
Demo
Set the LineNoText property value to set the line number column header display text, the default is line number
By setting the ClickToSelect property value, you can click any cell to select the entire row, and the selected row style is set to active
Demo
You can set the OnClickRowCallback callback delegate method to handle the clicked row accordingly. After clicking any row in the table, the Name value of the bound data of the selected row will be displayed below
Note: UI rendering is not performed inside this callback delegate. When UI data update operation is required, please manually and explicitly call the StateHasChanged method
Currently selected row: None
By setting the DoubleClickToEdit attribute value, you can double-click any cell to edit the current row. This function is only available if the Edit function is available
Demo
The mobile terminal (CardView) mode temporarily does not support double-click to edit the current row function
The multi-select mode also supports the double-click editing function. If you set the ClickToSelect click selection effect, the double-click editing function will cause the row selection state to be alternately selected. Please set ClickToSelect=false. Disable this feature
This function is only valid in the Table component single-selection mode. By setting the DoubleClickRowCallback attribute value, you can double-click any cell to customize the callback delegate method and realize your own the required function
Demo
The mobile terminal (CardView) mode temporarily does not support double-click editing of the current row function
By setting the SetRowClassFormatter attribute value, you can set the row style through the row data logic, and realize the function of your own highlighting requirements
Demo
In this example, the SetRowClassFormatter method will highlight the row by judging the Count > 60 of the bound data
@page "/tables/row"
<h3>@RowLocalizer["Title"]</h3>
<h4>@RowLocalizer["Desc"]</h4>
<DemoBlock Title="@RowLocalizer["RowNubmerTitle"]" Introduction="@RowLocalizer["RowNubmerIntro"]" Name="RowNubmer">
<p>@((MarkupString)RowLocalizer["RowNumberP"].Value)</p>
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true"
ShowToolbar="true" ShowLineNo="true" LineNoText="@RowLocalizer["RowNumberText"]"
ShowDefaultButtons="false" ClickToSelect="true"
OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@RowLocalizer["ClickToSelectTitle"]" Introduction="@RowLocalizer["ClickToSelectIntro"]" Name="ClickToSelect">
<p>@((MarkupString)RowLocalizer["ClickToSelectP"].Value)</p>
<p>@((MarkupString)RowLocalizer["ClickToSelectP2"].Value)</p>
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true"
ShowToolbar="true"
ShowDefaultButtons="false" ClickToSelect="true" OnClickRowCallback="@ClickRow"
OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
<p>@((MarkupString)RowLocalizer["ClickToSelectP3"].Value) @(CurrentItem?.Name ?? RowLocalizer["ClickToSelectNoneText"])</p>
</DemoBlock>
<DemoBlock Title="@RowLocalizer["DoubleClickToEditTitle"]" Introduction="@RowLocalizer["DoubleClickToEditIntro"]" Name="DoubleClickToEdit">
<p>@((MarkupString)RowLocalizer["DoubleClickToEditP"].Value)</p>
<p>@((MarkupString)RowLocalizer["DoubleClickToEditP1"].Value)</p>
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true"
ShowToolbar="true" ShowDeleteButton="false"
ClickToSelect="true" DoubleClickToEdit="true"
OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
<EditTemplate>
<div class="row g-3">
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="@context.Name" placeholder="@RowLocalizer["PlaceHolder"].Value" maxlength="50">
</BootstrapInput>
</div>
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="@context.Address" placeholder="@RowLocalizer["PlaceHolder"].Value" maxlength="50">
</BootstrapInput>
</div>
<div class="col-12 col-sm-6">
<DateTimePicker @bind-Value="@context.DateTime">
</DateTimePicker>
</div>
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="@context.Count">
</BootstrapInput>
</div>
</div>
</EditTemplate>
</Table>
</DemoBlock>
<DemoBlock Title="@RowLocalizer["DoubleClickRowCallbackTitle"]" Introduction="@RowLocalizer["DoubleClickRowCallbackIntro"]" Name="DoubleClickRowCallback">
<p>@RowLocalizer["DoubleClickRowCallbackP"]</p>
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true"
ShowToolbar="true"
ShowDefaultButtons="false" OnDoubleClickRowCallback="@DoubleClickRowCallback"
OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@RowLocalizer["SetRowClassFormatterTitle"]" Introduction="@RowLocalizer["SetRowClassFormatterIntro"]" Name="SetRowClassFormatter">
<p>@((MarkupString)RowLocalizer["SetRowClassFormatterP"].Value)</p>
<Table TItem="Foo" SetRowClassFormatter="@SetRowClassFormatter"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true"
ShowToolbar="true"
ShowDefaultButtons="false" OnDoubleClickRowCallback="@DoubleClickRowCallback"
OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<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>
/// Table 组件行示例代码
/// </summary>
public partial class TablesRow
{
[Inject]
[NotNull]
private IStringLocalizer<Foo>? Localizer { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<TablesRow>? RowLocalizer { get; set; }
[Inject]
[NotNull]
private ToastService? ToastService { get; set; }
private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };
[NotNull]
private List<Foo>? Items { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(Localizer);
}
private static Task<Foo> OnAddAsync() => Task.FromResult(new Foo() { DateTime = DateTime.Now });
private Task<bool> OnSaveAsync(Foo item, ItemChangedType changedType)
{
// 增加数据演示代码
if (changedType == ItemChangedType.Add)
{
item.Id = Items.Max(i => i.Id) + 1;
Items.Add(item);
}
else
{
var oldItem = Items.FirstOrDefault(i => i.Id == item.Id);
if (oldItem != null)
{
oldItem.Name = item.Name;
oldItem.Address = item.Address;
oldItem.DateTime = item.DateTime;
oldItem.Count = item.Count;
oldItem.Complete = item.Complete;
oldItem.Education = item.Education;
}
}
return Task.FromResult(true);
}
private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
{
IEnumerable<Foo> items = Items;
// 设置记录总数
var total = items.Count();
// 内存分页
items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
return Task.FromResult(new QueryData<Foo>()
{
Items = items,
TotalCount = total,
IsSorted = true,
IsFiltered = true,
IsSearch = true
});
}
private async Task DoubleClickRowCallback(Foo item)
{
var cate = ToastCategory.Success;
var title = "双击行回调委托示例";
var content = $"选中行数据为名称 {item.Name} 的数据";
await ToastService.Show(new ToastOption()
{
Category = cate,
Title = title,
Content = content
});
}
private static string? SetRowClassFormatter(Foo item) => item.Count > 60 ? "highlight" : null;
private Foo? CurrentItem { get; set; }
private Task ClickRow(Foo item)
{
CurrentItem = item;
StateHasChanged();
return Task.CompletedTask;
}
}
