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="true"
           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 List<Foo> SelectedRows = new List<Foo>();

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

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

        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 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