Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Table 表格

用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

通过设置 ShowLineNo 属性为 true 时表格显示行号了,默认值为 false

Demo

设置 LineNoText 属性值来设置行号列头显示文本,默认为 行号

Loading...

通过设置 ClickToSelect 属性值可以实现点击任意单元格选中整行效果,选中行样式被设置为 active

Demo

可以设置 OnClickRowCallback 回调委托方法对点击行做相应处理,点击表格中任意一行后在下方显示选中行绑定数据的 Name

注意:此回调委托内部不进行 UI 渲染,需要 UI 数据更新操作时,请手动显式调用 StateHasChanged 方法

Loading...

当前选中行:无

通过设置 DoubleClickToEdit 属性值可以实现双击任意单元格编辑本行效果,此功能前提是 Edit 功能可用

Demo

移动端(CardView)模式暂时不支持双击编辑当前行功能

多选模式下同样支持双击编辑功能,如果设置 ClickToSelect 点击选择效果后,双击编辑功能会导致行选中状态交替选中,请自行设置 ClickToSelect=false 关闭此功能

Loading...

本功能仅限 Table 组件单选模式下生效,通过设置 DoubleClickRowCallback 属性值可以实现双击任意单元格自定义回调委托方法,实现自己的需求功能

Demo

移动端(CardView)模式暂时不支持双击编辑当前行功能

Loading...

通过设置 SetRowClassFormatter 属性值可以实现通过行数据逻辑对行样式进行设置,实现自己高亮需求功能

Demo

本例中 SetRowClassFormatter 方法通过判断绑定数据的 Count > 60 时行高亮显示

Loading...
@page "/tables/row"

<h3>Table 表格</h3>

<h4>用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。</h4>

<Block Title="显示行号" Introduction="通过设置 <code>ShowLineNo</code> 属性为 <code>true</code> 时表格显示行号了,默认值为 <code>false</code>">
    <p>设置 <code>LineNoText</code> 属性值来设置行号列头显示文本,默认为 <code>行号</code></p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowLineNo="true" LineNoText="序号"
           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>
</Block>

<Block Title="点击单元格选中整行效果" Introduction="通过设置 <code>ClickToSelect</code> 属性值可以实现点击任意单元格选中整行效果,选中行样式被设置为 <code>active</code>">
    <p>可以设置 <code>OnClickRowCallback</code> 回调委托方法对点击行做相应处理,点击表格中任意一行后在下方显示选中行绑定数据的 <code>Name</code> 值</p>
    <p>注意:此回调委托内部不进行 UI 渲染,需要 UI 数据更新操作时,请手动显式调用 <code>StateHasChanged</code> 方法</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>当前选中行:@(CurrentItem?.Name ?? "无")</p>
</Block>

<Block Title="双击单元格编辑本行效果" Introduction="通过设置 <code>DoubleClickToEdit</code> 属性值可以实现双击任意单元格编辑本行效果,此功能前提是 <code>Edit</code> 功能可用">
    <p>移动端(CardView)模式暂时不支持双击编辑当前行功能</p>
    <p>多选模式下同样支持双击编辑功能,如果设置 <code>ClickToSelect</code> 点击选择效果后,双击编辑功能会导致行选中状态交替选中,请自行设置 <code>ClickToSelect=false</code> 关闭此功能</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="不可为空,50字以内" maxlength="50">
                    </BootstrapInput>
                </div>
                <div class="col-12 col-sm-6">
                    <BootstrapInput @bind-Value="@context.Address" placeholder="不可为空,50字以内" 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>
</Block>

<Block Title="自定义行双击事件" Introduction="本功能仅限 <code>Table</code> 组件单选模式下生效,通过设置 <code>DoubleClickRowCallback</code> 属性值可以实现双击任意单元格自定义回调委托方法,实现自己的需求功能">
    <p>移动端(CardView)模式暂时不支持双击编辑当前行功能</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>
</Block>

<Block Title="自定义行高亮" Introduction="通过设置 <code>SetRowClassFormatter</code> 属性值可以实现通过行数据逻辑对行样式进行设置,实现自己高亮需求功能">
    <p>本例中 <code>SetRowClassFormatter</code> 方法通过判断绑定数据的 <code>Count > 60</code> 时行高亮显示</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>
</Block>
// 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.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages.Table
{
    /// <summary>
    /// Table 组件行示例代码
    /// </summary>
    public partial class TablesRow
    {
        [Inject]
        [NotNull]
        private IStringLocalizer<Foo>? Localizer { 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;
        }
    }
}

B 站相关视频链接

[传送门]

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload