
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");
}
}
}