Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Table 表格

单元格相关操作示例

基础的表格展示用法

Demo

本例中通过设置 OnCellRenderHandler 回调委托,通过判断条件对 NameAddress 两列进行单元格合并操作,并且通过设置 TableCellArgs 属性 Class 值为 cell-demo 样式表名称对合并后单元格进行背景色设置

.cell-demo {
    background-color: #ddd;
}
Loading...

通过设置 OnDoubleClickColumn 回调,设置当前单元格的双击事件

Demo
Loading...

TableCellArgs

Loading...
@page "/tables/cell"

<h3>Table 表格</h3>

<h4>单元格相关操作示例</h4>

<DemoBlock Title="合并单元格" Introduction="基础的表格展示用法" Name="MergeCell">
    <p>本例中通过设置 <code>OnCellRenderHandler</code> 回调委托,通过判断条件对 <code>Name</code> 与 <code>Address</code> 两列进行单元格合并操作,并且通过设置 <code>TableCellArgs</code> 属性 <code>Class</code> 值为 <code>cell-demo</code> 样式表名称对合并后单元格进行背景色设置</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="双击单元格" Introduction="通过设置 <code>OnDoubleClickColumn</code> 回调,设置当前单元格的双击事件" Name="OnDoubleClickCell">
    <Tips>
        <p>设置双击单元格回调后,鼠标悬停单元格后单元格出现下标横线,以作提示可通过 <code>.table-cell .is-dbcell</code> 样式覆盖</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;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

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 = "双击单元格回调", Content = $"当前单元格名称:{displayName} 当前值:{value}" });
    }

    private static IEnumerable<AttributeItem> GetAttributes() => new[]
    {
            new AttributeItem() {
                Name = "Row",
                Description = "当前单元格行数据 请自行转化为绑定模型",
                Type = "object",
                ValueList = " — ",
                DefaultValue = "<TModel>"
            },
            new AttributeItem() {
                Name = "ColumnName",
                Description = "当前单元格绑定列名称",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Colspan",
                Description = "合并单元格数量",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "0"
            },
            new AttributeItem() {
                Name = "Class",
                Description = "当前单元格样式",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Value",
                Description = "当前单元格显示内容",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
}

B 站相关视频链接

暂无

交流群

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