Enterprise-level component library based on Bootstrap and Blazor
gitee
version
license
download
repo
commit
build
coverage

Table 换行示例

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

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

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

Demo

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

Loading...

通过设置 HeaderTextWrap 使超长表头折行

Demo

可以拖动窗口大小,窗口过小时自动出现横向滚动条后,表头会自动折行

Loading...

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

Demo
  • 可以拖动窗口大小,窗口过小时 地址 列自动进行折行处理
  • 通过设置 TextWrap 来开启自动换行功能
  • 注意:推荐使用 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>

<DemoBlock Title="表头超长示例" Introduction="在某种特殊情况下可能表头比较长,需要将表头控制在一个固定宽度内,鼠标移动到表头上时显示 <code>Tooltip</code> 来显示完整表头信息" Name="WarpHeader">
    <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>
</DemoBlock>

<DemoBlock Title="表头超长折行" Introduction="通过设置 <code>HeaderTextWrap</code> 使超长表头折行" Name="HeaderTextWrap">
    <p>可以拖动窗口大小,窗口过小时自动出现横向滚动条后,表头会自动折行</p>
    <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems" HeaderTextWrap="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Text="我是超级长的时间表头" />
            <TableColumn @bind-Field="@context.Name" Text="我是超级长的姓名表头" />
            <TableColumn @bind-Field="@context.Address" Text="我是超级长的地址表头" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="单元格数据超长折行示例" Introduction="在某种特殊情况下可能单元格内容比较长,需要进行折行处理" Name="LongData">
    <ul class="ul-demo mb-3">
        <li>可以拖动窗口大小,窗口过小时 <b>地址</b> 列自动进行折行处理</li>
        <li>通过设置 <code>TextWrap</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" TextWrap="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="单元格数据超长省略示例" Introduction="在某种特殊情况下可能单元格内容比较长,需要进行省略处理" Name="DataResizing">
    <ul class="ul-demo mb-3">
        <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" AllowResizing="true" IsPagination="true"
           OnQueryAsync="OnQueryAsync" PageItemsSource="new int[] {4, 8, 20}">
        <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" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="自定义单元格内排版" Introduction="使用模板对单元格内数据进行特殊布局" Name="CustomCell">
    <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">
                <Template Context="v">
                    <div>
                        <div>状态:@v.Value</div>
                        <div>时间:@v.Row.DateTime)</div>
                    </div>
                </Template>
            </TableColumn>
        </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/

using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using Microsoft.JSInterop;

namespace BootstrapBlazor.Shared.Samples.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);
    }

    private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
    {
        var items = Foo.GenerateFoo(Localizer);

        // 设置记录总数
        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
        });
    }

    /// <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 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
Seems like the connection with the server has been lost. It can be due to poor or broken network. Please hang on while we're trying to reconnect...
Oh snap! Failed to reconnect with the server. This is typically caused by a longer network outage, or if the server has been taken down. You can try to reconnect, but if that does not work, you need to reload the page.
Oh man! The server rejected the attempt to reconnect. The only option now is to reload the page, but be prepared that it won't work, since this is typically caused by a failure on the server.
Bootstrap Blazor 组件库 更新到 6.6.0

首先感谢您对本套组件的关注,本目前本套组件已经拥有超过 120 个组件,本组件是基于 Bootstrap 风格的 Blazor 企业级组件库,提供如布局、导航、表单、数据、通知、图标、语音等几大类通用组件,每一个组件都经过静心设计,具有模块化、响应式和优秀的性能。从更多实际场景出发,满足多种场景的需求,极大的减少开发者时间成本,大大缩短开发周期,大幅提高开发效率,并提供了一套 通用权限管理系统 示例工程。Bootstrap Blazor 产品是由一支专业的全职技术团队进行维护,高效的响应速度,多元化的解决方案,长期提供支持,并提供企业级支持。目前已在多家知名国企内部使用,项目最高在线 1200 人稳定运行。右侧为国内人数最多的中文 Blazor QQ 社区二维码,欢迎扫描加群。

组件更新到 6.6.0 更新日志 [传送门] 如果组件给您带来了方便,请您帮忙给项目点亮 Star github gitee

QQGroup
QQ 795206915