Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Table 表格

用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

显示行号

通过设置 ShowLineNo 属性为 true 时表格显示行号了,默认值为 false

Demo

设置 LineNoText 属性值来设置行号列头显示文本,默认为 行号

Loading...

点击单元格选中整行效果

通过设置 ClickToSelect 属性值可以实现点击任意单元格选中整行效果,选中行样式被设置为 active

Demo

可以设置 OnClickRowCallback 回调委托方法对点击行做相应处理,点击表格中任意一行后在下方显示选中行绑定数据的 Name

注意:此回调委托内部不进行 UI 渲染,需要 UI 数据更新操作时,请手动显式调用 StateHasChanged 方法

Loading...

当前选中行:无

双击单元格编辑本行效果

通过设置 DoubleClickToEdit 属性值可以实现双击任意单元格编辑本行效果,此功能前提是 Edit 功能可用

Demo

移动端(CardView)模式暂时不支持双击编辑当前行功能

多选模式下同样支持双击编辑功能,如果设置 ClickToSelect 点击选择效果后,双击编辑功能会导致行选中状态交替选中,请自行设置 ClickToSelect=false 关闭此功能

Loading...

自定义行双击事件

本功能仅限 Table 组件单选模式下生效,通过设置 DoubleClickRowCallback 属性值可以实现双击任意单元格自定义回调委托方法,实现自己的需求功能

Demo

移动端(CardView)模式暂时不支持双击编辑当前行功能

Loading...

自定义行高亮

通过设置 SetRowClassFormatter 属性值可以实现通过行数据逻辑对行样式进行设置,实现自己高亮需求功能

Demo

本例中 SetRowClassFormatter 方法通过判断绑定数据的 Count > 60 时行高亮显示

Loading...
@using Foo = BootstrapBlazor.Shared.Pages.Components.Foo
@inherits TablesBaseEdit
@page "/tables/row"

<h3>Table 表格</h3>

<h4>用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。</h4>

<Block Title="显示行号" Introduction="通过设置 <code>ShowLineNo</code> 属性为 <code>true</code> 时表格显示行号了,默认值为 <code>false</code>">
    <p>设置 <code>LineNoText</code> 属性值来设置行号列头显示文本,默认为 <code>行号</code></p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowLineNo="true" LineNoText="序号"
           ShowDefaultButtons="false" ClickToSelect="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>

<Block Title="点击单元格选中整行效果" Introduction="通过设置 <code>ClickToSelect</code> 属性值可以实现点击任意单元格选中整行效果,选中行样式被设置为 <code>active</code>">
    <p>可以设置 <code>OnClickRowCallback</code> 回调委托方法对点击行做相应处理,点击表格中任意一行后在下方显示选中行绑定数据的 <code>Name</code> 值</p>
    <p>注意:此回调委托内部不进行 UI 渲染,需要 UI 数据更新操作时,请手动显式调用 <code>StateHasChanged</code> 方法</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true"
           ShowDefaultButtons="false" ClickToSelect="true" OnClickRowCallback="@ClickRow"
           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>
    <p>当前选中行:@(CurrentItem?.Name ?? "无")</p>
</Block>

<Block Title="双击单元格编辑本行效果" Introduction="通过设置 <code>DoubleClickToEdit</code> 属性值可以实现双击任意单元格编辑本行效果,此功能前提是 <code>Edit</code> 功能可用">
    <p>移动端(CardView)模式暂时不支持双击编辑当前行功能</p>
    <p>多选模式下同样支持双击编辑功能,如果设置 <code>ClickToSelect</code> 点击选择效果后,双击编辑功能会导致行选中状态交替选中,请自行设置 <code>ClickToSelect=false</code> 关闭此功能</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowDeleteButton="false"
           ClickToSelect="true" DoubleClickToEdit="true"
           OnQueryAsync="@OnEditQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync">
        <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>
        <EditTemplate>
            <div class="form-inline">
                <div class="row">
                    <div class="form-group col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Name" placeholder="不可为空,50字以内" maxlength="50">
                        </BootstrapInput>
                    </div>
                    <div class="form-group col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Address" placeholder="不可为空,50字以内" maxlength="50">
                        </BootstrapInput>
                    </div>
                    <div class="form-group col-12 col-sm-6">
                        <DateTimePicker @bind-Value="@context.DateTime">
                        </DateTimePicker>
                    </div>
                    <div class="form-group col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Count">
                        </BootstrapInput>
                    </div>
                </div>
            </div>
        </EditTemplate>
    </Table>
</Block>

<Block Title="自定义行双击事件" Introduction="本功能仅限 <code>Table</code> 组件单选模式下生效,通过设置 <code>DoubleClickRowCallback</code> 属性值可以实现双击任意单元格自定义回调委托方法,实现自己的需求功能">
    <p>移动端(CardView)模式暂时不支持双击编辑当前行功能</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true"
           ShowDefaultButtons="false" OnDoubleClickRowCallback="@DoubleClickRowCallback"
           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>

<Block Title="自定义行高亮" Introduction="通过设置 <code>SetRowClassFormatter</code> 属性值可以实现通过行数据逻辑对行样式进行设置,实现自己高亮需求功能">
    <p>本例中 <code>SetRowClassFormatter</code> 方法通过判断绑定数据的 <code>Count > 60</code> 时行高亮显示</p>
    <Table TItem="Foo" SetRowClassFormatter="@SetRowClassFormatter"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true"
           ShowDefaultButtons="false" OnDoubleClickRowCallback="@DoubleClickRowCallback"
           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>

@code {

    private Task DoubleClickRowCallback(Foo item)
    {
        var cate = ToastCategory.Success;
        var title = "双击行回调委托示例";
        var content = $"选中行数据为名称 {item.Name} 的数据";
        ToastService?.Show(new ToastOption()
        {
            Category = cate,
            Title = title,
            Content = content
        });
        return Task.CompletedTask;
    }

    private string? SetRowClassFormatter(Foo item)
    {
        return item.Count > 60 ? "highlight" : null;
    }

    private Foo? CurrentItem { get; set; }

    private Task ClickRow(Foo item)
    {
        CurrentItem = item;
        StateHasChanged();
        return Task.CompletedTask;
    }
}
// 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 System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    ///
    /// </summary>
    public abstract class TablesBaseEdit : TablesBaseQuery
    {
        private static readonly object _objectLock = new object();

        /// <summary>
        ///
        /// </summary>
        protected List<Foo> EditItems { get; set; } = GenerateItems();

        /// <summary>
        ///
        /// </summary>
        protected IEnumerable<SelectedItem>? Educations { get; set; }

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

            Educations = typeof(EnumEducation).ToSelectList();
        }

        /// <summary>
        ///
        /// </summary>
        /// <param name="options"></param>
        /// <returns></returns>
        protected Task<QueryData<Foo>> OnEditQueryAsync(QueryPageOptions options) => FooQueryAsync(EditItems, options);

        /// <summary>
        ///
        /// </summary>
        /// <returns></returns>
        protected static Task<Foo> OnAddAsync()
        {
            return Task.FromResult(new Foo() { DateTime = DateTime.Now });
        }

        /// <summary>
        ///
        /// </summary>
        /// <param name="item"></param>
        /// <returns></returns>
        protected Task<bool> OnSaveAsync(Foo item)
        {
            // 增加数据演示代码
            if (item.Id == 0)
            {
                // 演示代码,生产中请根据实际情况考虑是否加锁操作
                lock (_objectLock)
                {
                    item.Id = EditItems.Max(i => i.Id) + 1;
                    EditItems.Add(item);
                }
            }
            else
            {
                var oldItem = EditItems.FirstOrDefault(i => i.Id == item.Id);
                if (oldItem != null)
                {
                    oldItem.Name = item.Name;
                    oldItem.Address = item.Address;
                    oldItem.DateTime = item.DateTime;
                    oldItem.Count = item.Count;
                    oldItem.Complete = item.Complete;
                    oldItem.Education = item.Education;
                }
            }
            return Task.FromResult(true);
        }

        /// <summary>
        ///
        /// </summary>
        /// <param name="items"></param>
        /// <returns></returns>
        protected Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
        {
            items.ToList().ForEach(i => EditItems.Remove(i));
            return Task.FromResult(true);
        }
    }
}

B 站相关视频链接

[传送门]

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload