Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Table 表格

通过设置 SelectedRows 设置表格行状态,通过选中样式可以设置高亮

设置选中行功能

通过设置 SelectedRows 属性集合初始化表格时默认为选中状态

Demo
Loading...

选中的行记录:

  • Zhangsan 0001
  • Zhangsan 0002
  • Zhangsan 0003
  • Zhangsan 0004
@page "/tables/selection"

<h3>Table 表格</h3>

<h4>通过设置 <code>SelectedRows</code> 设置表格行状态,通过选中样式可以设置高亮</h4>

<Block Title="设置选中行功能" Introduction="通过设置 <code>SelectedRows</code> 属性集合初始化表格时默认为选中状态">
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowToolbar="true" @bind-SelectedRows="@SelectedRows"
           ShowDefaultButtons="false"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</Block>

<p class="mt-3">选中的行记录:</p>
<ul class="ul-demo">
    @foreach (var item in SelectedRows)
    {
        <li>@item.Name</li>
    }
</ul>
// 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 System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages.Table
{
    /// <summary>
    /// 选中行示例代码
    /// </summary>
    public sealed partial class TablesSelection
    {
        [Inject]
        [NotNull]
        private IStringLocalizer<Foo>? Localizer { get; set; }

        private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };

        [NotNull]
        private List<Foo>? Items { get; set; }

        private IEnumerable<Foo> SelectedRows = new List<Foo>();

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

            Items = Foo.GenerateFoo(Localizer);
            SelectedRows = Items.Take(4);
        }

        private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
        {
            // 设置记录总数
            var total = Items.Count;

            // 内存分页
            var 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
            });
        }
    }
}

B 站相关视频链接

[传送门]

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload