Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Table 表格

单元格相关操作示例

基础的表格展示用法。

Demo

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

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

TableCellArgs

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

<h3>Table 表格</h3>

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

<Block Title="合并单元格" Introduction="基础的表格展示用法。">
    <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="180" />
            <TableColumn @bind-Field="@context.Name" OnCellRender="@OnCellRenderHandler" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<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 BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;

namespace BootstrapBlazor.Shared.Pages.Table
{
    /// <summary>
    /// 
    /// </summary>
    public partial class TablesCell
    {
        [Inject]
        [NotNull]
        private IStringLocalizer<Foo>? Localizer { 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)
        {
            var foo = args.Row as Foo;
            if (foo != null && 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 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( 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