Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

固定列功能

对于列数很多的数据,可以固定前后的列,横向滚动查看其它数据

固定列用法请尽可能的设置固定列宽度,未设置时按照 200 默认值设置

设置 Fixed 属性固定表头

Demo

本例中设置 Name DateTime Complete 前两列和最后一列为固定列,中间各列进行水平滚动

Loading...

设置 Height=200 固定表头,设置 Fixed 对列进行固定

Demo
Loading...

设置 FixedExtendButtonsColumn 对操作列进行固定

Demo
Loading...

设置 Height=200 固定表头,设置 FixedExtendButtonsColumn 对操作列进行固定

Demo
Loading...
@page "/tables/fix-column"

<h3>固定列功能</h3>

<h4>对于列数很多的数据,可以固定前后的列,横向滚动查看其它数据</h4>

<p>
    固定列用法请尽可能的设置固定列宽度,未设置时按照 <code>200</code> 默认值设置
</p>

<Block Title="固定列头与列尾" Introduction="设置 <code>Fixed</code> 属性固定表头">
    <p>本例中设置 <code>Name</code> <code>DateTime</code> <code>Complete</code> 前两列和最后一列为固定列,中间各列进行水平滚动</p>
    <Table TItem="Foo" Items="@Items.Take(4)" HeaderStyle="TableHeaderStyle.Light" IsBordered="true" IsStriped="true" class="table-fixed-column-demo">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" Fixed="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Width="900" Filterable="true" />
            <TableColumn @bind-Field="@context.Education" Width="100" Filterable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Filterable="true" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" Filterable="true" />
        </TableColumns>
    </Table>
</Block>

<Block Title="固定表头与列" Introduction="设置 <code>Height=200</code> 固定表头,设置 <code>Fixed</code> 对列进行固定">
    <Table TItem="Foo" Items="@Items.Take(10)" HeaderStyle="TableHeaderStyle.Dark" IsBordered="true" IsStriped="true" IsMultipleSelect="true" Height="200" class="table-fixed-column-demo2">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
            <TableColumn @bind-Field="@context.Education" Width="100" />
            <TableColumn @bind-Field="@context.Count" Width="100" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" />
        </TableColumns>
    </Table>
</Block>

<Block Title="固定按钮操作列" Introduction="设置 <code>FixedExtendButtonsColumn</code> 对操作列进行固定">
    <Table TItem="Foo" Items="@Items.Take(4)" IsBordered="true" IsStriped="true"
           ShowExtendButtons="true" FixedExtendButtonsColumn="true"
           class="table-fixed-column-demo">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" Fixed="true" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
            <TableColumn @bind-Field="@context.Education" Width="100" />
            <TableColumn @bind-Field="@context.Count" Width="100" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" />
        </TableColumns>
    </Table>
</Block>

<Block Title="固定表头与按钮操作列" Introduction="设置 <code>Height=200</code> 固定表头,设置 <code>FixedExtendButtonsColumn</code> 对操作列进行固定">
    <Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsStriped="true" IsMultipleSelect="true"
           ShowExtendButtons="true" FixedExtendButtonsColumn="true"
           Height="200" class="table-fixed-column-demo2">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
            <TableColumn @bind-Field="@context.Education" Width="100" />
            <TableColumn @bind-Field="@context.Count" Width="100" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" />
        </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.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 TablesFixedColumn
    {
        [NotNull]
        private List<Foo>? Items { get; set; }

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

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

            Items = Foo.GenerateFoo(Localizer);
        }
    }
}

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