Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Table 换行示例

当表头或者行内单元格内容超长时,通过样式更改实现省略、换行等效果

注意:由于 Table 组件已实现适配移动端功能,此演示需在电脑端查看

在某种特殊情况下可能表头比较长,需要将表头控制在一个固定宽度内,鼠标移动到表头上时显示 Tooltip 来显示完整表头信息

Demo

可以拖动窗口大小,窗口过小时自动出现横向滚动条

Loading...

在某种特殊情况下可能单元格内容比较长,需要进行折行处理

Demo
  • 可以拖动窗口大小,窗口过小时 地址 列自动进行折行处理
  • 通过设置 AllowTextWrap 来开启自动换行功能
  • 注意:推荐使用 Width 对列宽度进行设置
Loading...

在某种特殊情况下可能单元格内容比较长,需要进行省略处理

Demo
  • 可以拖动窗口大小,窗口过小时 地址 列自动进行省略处理
  • 通过设置 TextEllipsis 来开启文本超长省略功能
  • 注意:推荐使用 Width 对列宽度进行设置,如未设置列宽内部自动使用 200px 宽度
  • 单元格内文本被省略后,可以通过 ShowTips 属性来控制鼠标悬停是否显示全部文本,默认为 false
  • 拖动地址列,单元格显示内容自动增加与减少
Loading...

使用模板对单元格内数据进行特殊布局

Demo
Loading...
@inherits BootstrapComponentBase
@page "/tables/wrap"

<h3>Table 换行示例</h3>

<h4>当表头或者行内单元格内容超长时,通过样式更改实现省略、换行等效果</h4>

<p><b>注意:</b>由于 <code>Table</code> 组件已实现适配移动端功能,此演示需在电脑端查看</p>

<Block Title="表头超长示例" Introduction="在某种特殊情况下可能表头比较长,需要将表头控制在一个固定宽度内,鼠标移动到表头上时显示 <code>Tooltip</code> 来显示完整表头信息">
    <p>可以拖动窗口大小,窗口过小时自动出现横向滚动条</p>
    <div class="table-wrap-header-demo">
        <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems">
            <TableColumns>
                <TableColumn @bind-Field="@context.DateTime" Width="180" Text="我是超级长的时间表头" />
                <TableColumn @bind-Field="@context.Name" Text="我是超级长的姓名表头" />
                <TableColumn @bind-Field="@context.Address" Text="我是超级长的地址表头" />
            </TableColumns>
        </Table>
    </div>
</Block>

<Block Title="单元格数据超长折行示例" Introduction="在某种特殊情况下可能单元格内容比较长,需要进行折行处理">
    <ul class="ul-demo">
        <li>可以拖动窗口大小,窗口过小时 <b>地址</b> 列自动进行折行处理</li>
        <li>通过设置 <code>AllowTextWrap</code> 来开启自动换行功能</li>
        <li><b>注意:</b>推荐使用 <code>Width</code> 对列宽度进行设置</li>
    </ul>
    <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Text="时间" />
            <TableColumn @bind-Field="@context.Name" Text="姓名" />
            <TableColumn @bind-Field="@context.Address" Text="地址" Width="200" AllowTextWrap="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</Block>

<Block Title="单元格数据超长省略示例" Introduction="在某种特殊情况下可能单元格内容比较长,需要进行省略处理">
    <ul class="ul-demo">
        <li>可以拖动窗口大小,窗口过小时 <b>地址</b> 列自动进行省略处理</li>
        <li>通过设置 <code>TextEllipsis</code> 来开启文本超长省略功能</li>
        <li><b>注意:</b>推荐使用 <code>Width</code> 对列宽度进行设置,如未设置列宽内部自动使用 200px 宽度</li>
        <li>单元格内文本被省略后,可以通过 <code>ShowTips</code> 属性来控制鼠标悬停是否显示全部文本,默认为 <code>false</code></li>
        <li>拖动地址列,单元格显示内容自动增加与减少</li>
    </ul>
    <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems" AllowResizing="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Text="时间" />
            <TableColumn @bind-Field="@context.Name" Text="姓名" />
            <TableColumn @bind-Field="@context.Address" Text="地址" Width="200" TextEllipsis="true" ShowTips="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" />
            <TableColumn @bind-Field="@context.Complete" ComponentType="@typeof(Switch)" />
        </TableColumns>
    </Table>
</Block>

<Block Title="自定义单元格内排版" Introduction="使用模板对单元格内数据进行特殊布局">
    <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems" AllowResizing="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Text="时间" />
            <TableColumn @bind-Field="@context.Name" Text="姓名" />
            <TableColumn @bind-Field="@context.Address" Text="地址" Width="200" TextEllipsis="true" ShowTips="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" />
            <TableColumn @bind-Field="@context.Complete" ComponentType="@typeof(Switch)">
                <Template Context="v">
                    <div>
                        <div>状态:@v.Value</div>
                        <div>时间:@((v.Row as Foo)!.DateTime)</div>
                    </div>
                </Template>
            </TableColumn>
        </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 Microsoft.JSInterop;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages.Table
{
    /// <summary>
    /// 折行演示示例代码
    /// </summary>
    public sealed partial class TablesWrap
    {
        [NotNull]
        private IEnumerable<Foo>? CellItems { get; set; }

        [Inject]
        [NotNull]
        private IStringLocalizer<Foo>? Localizer { get; set; }

        /// <summary>
        /// OnInitialized 方法
        /// </summary>
        protected override void OnInitialized()
        {
            base.OnInitialized();

            CellItems = Foo.GenerateFoo(Localizer, 4);
        }

        /// <summary>
        /// OnAfterRenderAsync 方法
        /// </summary>
        /// <param name="firstRender"></param>
        /// <returns></returns>
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);

            if (firstRender)
            {
                await JSRuntime.InvokeVoidAsync("$.table_wrap");
            }
        }
    }
}

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