Bootstrap Blazor - 一套企业级 UI 组件库

Table 表格

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

带 Toolbar 的表格

设置 ShowToolbar 显示工具条组件

Demo

<Table TItem="BindItem"
        IsBordered="true" IsPagination="true" PageItemsSource="@PageItemsSource"
        IsMultipleSelect="true" ShowToolbar="true" ShowDefaultButtons="false"
        OnQueryAsync="@OnQueryAsync" >
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" />
        <TableColumn @bind-Field="@context.Name" />
        <TableColumn @bind-Field="@context.Address" />
    </TableColumns>
</Table>

@code {
    private static readonly Random random = new Random();

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    protected static List<BindItem> GenerateItems() => new List<BindItem>(Enumerable.Range(1, 80).Select(i => new BindItem()
    {
        Id = i,
        Name = $"张三 {i:d4}",
        DateTime = DateTime.Now.AddDays(i - 1),
        Address = $"上海市普陀区金沙江路 {random.Next(1000, 2000)} 弄",
        Count = random.Next(1, 100),
        Complete = random.Next(1, 100) > 50
    }));

    /// <summary>
    /// 
    /// </summary>
    protected static IEnumerable<BindItem> Items { get; } = GenerateItems();

    /// <summary>
    /// 
    /// </summary>
    protected IEnumerable<int> PageItemsSource => new int[] { 2, 4, 10, 20 };
    
    /// <summary>
    /// 
    /// </summary>
    /// <param name="options"></param>
    /// <returns></returns>
    protected Task<QueryData<BindItem>> OnQueryAsync(QueryPageOptions options) => BindItemQueryAsync(Items, options);

    /// <summary>
    /// 
    /// </summary>
    /// <param name="items"></param>
    /// <param name="options"></param>
    /// <returns></returns>
    protected Task<QueryData<BindItem>> BindItemQueryAsync(IEnumerable<BindItem> items, QueryPageOptions options)
    {
        //TODO: 此处代码后期精简
        if (!string.IsNullOrEmpty(SearchModel.Name)) items = items.Where(item => item.Name?.Contains(SearchModel.Name, StringComparison.OrdinalIgnoreCase) ?? false);
        if (!string.IsNullOrEmpty(SearchModel.Address)) items = items.Where(item => item.Address?.Contains(SearchModel.Address, StringComparison.OrdinalIgnoreCase) ?? false);
        if (!string.IsNullOrEmpty(options.SearchText)) items = items.Where(item => (item.Name?.Contains(options.SearchText) ?? false)
                || (item.Address?.Contains(options.SearchText) ?? false));

        // 过滤
        var isFiltered = false;
        if (options.Filters.Any())
        {
            items = items.Where(options.Filters.GetFilterFunc<BindItem>());

            // 通知内部已经过滤数据了
            isFiltered = true;
        }

        // 排序
        var isSorted = false;
        if (!string.IsNullOrEmpty(options.SortName))
        {
            // 外部未进行排序，内部自动进行排序处理
            var invoker = SortLambdaCache.GetOrAdd(typeof(BindItem), key => items.GetSortLambda().Compile());
            items = invoker(items, options.SortName, options.SortOrder);

            // 通知内部已经过滤数据了
            isSorted = true;
        }

        // 设置记录总数
        var total = items.Count();

        // 内存分页
        items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();

        return Task.FromResult(new QueryData<BindItem>()
        {
            Items = items,
            TotalCount = total,
            IsSorted = isSorted,
            IsFiltered = isFiltered,
            IsSearch = !string.IsNullOrEmpty(SearchModel.Name) || !string.IsNullOrEmpty(SearchModel.Address)
        });
    }
}

带查询的表格

设置 ShowSearch 显示查询组件

Demo

<Table TItem="BindItem"
        IsBordered="true" IsPagination="true" PageItemsSource="@PageItemsSource"
        ShowToolbar="true" ShowSearch="true" ShowAdvancedSearch="false" ShowDefaultButtons="false"
        OnQueryAsync="@OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" />
        <TableColumn @bind-Field="@context.Name" />
        <TableColumn @bind-Field="@context.Address" />
    </TableColumns>
</Table>

@code {
    private static readonly Random random = new Random();

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    protected static List<BindItem> GenerateItems() => new List<BindItem>(Enumerable.Range(1, 80).Select(i => new BindItem()
    {
        Id = i,
        Name = $"张三 {i:d4}",
        DateTime = DateTime.Now.AddDays(i - 1),
        Address = $"上海市普陀区金沙江路 {random.Next(1000, 2000)} 弄",
        Count = random.Next(1, 100),
        Complete = random.Next(1, 100) > 50
    }));

    /// <summary>
    /// 
    /// </summary>
    protected static IEnumerable<BindItem> Items { get; } = GenerateItems();

    /// <summary>
    /// 
    /// </summary>
    protected IEnumerable<int> PageItemsSource => new int[] { 2, 4, 10, 20 };
    
    /// <summary>
    /// 
    /// </summary>
    /// <param name="options"></param>
    /// <returns></returns>
    protected Task<QueryData<BindItem>> OnQueryAsync(QueryPageOptions options) => BindItemQueryAsync(Items, options);

    /// <summary>
    /// 
    /// </summary>
    /// <param name="items"></param>
    /// <param name="options"></param>
    /// <returns></returns>
    protected Task<QueryData<BindItem>> BindItemQueryAsync(IEnumerable<BindItem> items, QueryPageOptions options)
    {
        //TODO: 此处代码后期精简
        if (!string.IsNullOrEmpty(SearchModel.Name)) items = items.Where(item => item.Name?.Contains(SearchModel.Name, StringComparison.OrdinalIgnoreCase) ?? false);
        if (!string.IsNullOrEmpty(SearchModel.Address)) items = items.Where(item => item.Address?.Contains(SearchModel.Address, StringComparison.OrdinalIgnoreCase) ?? false);
        if (!string.IsNullOrEmpty(options.SearchText)) items = items.Where(item => (item.Name?.Contains(options.SearchText) ?? false)
                || (item.Address?.Contains(options.SearchText) ?? false));

        // 过滤
        var isFiltered = false;
        if (options.Filters.Any())
        {
            items = items.Where(options.Filters.GetFilterFunc<BindItem>());

            // 通知内部已经过滤数据了
            isFiltered = true;
        }

        // 排序
        var isSorted = false;
        if (!string.IsNullOrEmpty(options.SortName))
        {
            // 外部未进行排序，内部自动进行排序处理
            var invoker = SortLambdaCache.GetOrAdd(typeof(BindItem), key => items.GetSortLambda().Compile());
            items = invoker(items, options.SortName, options.SortOrder);

            // 通知内部已经过滤数据了
            isSorted = true;
        }

        // 设置记录总数
        var total = items.Count();

        // 内存分页
        items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();

        return Task.FromResult(new QueryData<BindItem>()
        {
            Items = items,
            TotalCount = total,
            IsSorted = isSorted,
            IsFiltered = isFiltered,
            IsSearch = !string.IsNullOrEmpty(SearchModel.Name) || !string.IsNullOrEmpty(SearchModel.Address)
        });
    }
}

自定义扩展按钮

设置 TableToolbarTemplate 模板添加自定义扩展按钮

Demo

<Table TItem="BindItem"
       IsPagination="true" PageItemsSource="@PageItemsSource"
       IsStriped="true" IsBordered="true"
       ShowToolbar="true" ShowDefaultButtons="false" ShowSearch="false" IsMultipleSelect="true" ShowExtendButtons="false"
       OnQueryAsync="@OnQueryAsync">
    <TableToolbarTemplate>
        <TableToolbarButton Color="Color.Primary" Icon="fa fa-fw fa-download" Text="下载" OnClickCallback="@DownloadAsync" />
    </TableToolbarTemplate>
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Sortable="true" />
        <TableColumn @bind-Field="@context.Name" Sortable="true" />
        <TableColumn @bind-Field="@context.Address" Sortable="true" />
    </TableColumns>
</Table>

@code {
    private static readonly Random random = new Random();

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    protected static List<BindItem> GenerateItems() => new List<BindItem>(Enumerable.Range(1, 80).Select(i => new BindItem()
    {
        Id = i,
        Name = $"张三 {i:d4}",
        DateTime = DateTime.Now.AddDays(i - 1),
        Address = $"上海市普陀区金沙江路 {random.Next(1000, 2000)} 弄",
        Count = random.Next(1, 100),
        Complete = random.Next(1, 100) > 50
    }));

    /// <summary>
    /// 
    /// </summary>
    protected static IEnumerable<BindItem> Items { get; } = GenerateItems();

    /// <summary>
    /// 
    /// </summary>
    protected IEnumerable<int> PageItemsSource => new int[] { 2, 4, 10, 20 };
    
    /// <summary>
    /// 
    /// </summary>
    /// <param name="options"></param>
    /// <returns></returns>
    protected Task<QueryData<BindItem>> OnQueryAsync(QueryPageOptions options) => BindItemQueryAsync(Items, options);

    /// <summary>
    /// 
    /// </summary>
    /// <param name="items"></param>
    /// <param name="options"></param>
    /// <returns></returns>
    protected Task<QueryData<BindItem>> BindItemQueryAsync(IEnumerable<BindItem> items, QueryPageOptions options)
    {
        //TODO: 此处代码后期精简
        if (!string.IsNullOrEmpty(SearchModel.Name)) items = items.Where(item => item.Name?.Contains(SearchModel.Name, StringComparison.OrdinalIgnoreCase) ?? false);
        if (!string.IsNullOrEmpty(SearchModel.Address)) items = items.Where(item => item.Address?.Contains(SearchModel.Address, StringComparison.OrdinalIgnoreCase) ?? false);
        if (!string.IsNullOrEmpty(options.SearchText)) items = items.Where(item => (item.Name?.Contains(options.SearchText) ?? false)
                || (item.Address?.Contains(options.SearchText) ?? false));

        // 过滤
        var isFiltered = false;
        if (options.Filters.Any())
        {
            items = items.Where(options.Filters.GetFilterFunc<BindItem>());

            // 通知内部已经过滤数据了
            isFiltered = true;
        }

        // 排序
        var isSorted = false;
        if (!string.IsNullOrEmpty(options.SortName))
        {
            // 外部未进行排序，内部自动进行排序处理
            var invoker = SortLambdaCache.GetOrAdd(typeof(BindItem), key => items.GetSortLambda().Compile());
            items = invoker(items, options.SortName, options.SortOrder);

            // 通知内部已经过滤数据了
            isSorted = true;
        }

        // 设置记录总数
        var total = items.Count();

        // 内存分页
        items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();

        return Task.FromResult(new QueryData<BindItem>()
        {
            Items = items,
            TotalCount = total,
            IsSorted = isSorted,
            IsFiltered = isFiltered,
            IsSearch = !string.IsNullOrEmpty(SearchModel.Name) || !string.IsNullOrEmpty(SearchModel.Address)
        });
    }
        
    private Task DownloadAsync(IEnumerable<BindItem> items)
    {
        var cate = ToastCategory.Information;
        var title = "自定义下载示例";
        var content = "请先选择数据，然后点击下载按钮";
        if (items.Any())
        {
            cate = ToastCategory.Success;
            content = $"开始下载选中的 {items.Count()} 条数据";
        }
        ToastService?.Show(new ToastOption()
        {
            Category = cate,
            Title = title,
            Content = content
        });
        return Task.CompletedTask;
    }
}

自定义显示功能按钮

通过设置 ShowAddButton ShowEditButton ShowDeleteButton 属性值来控制单独功能按钮是否显示，当 ShowDefaultButtons 设置为 false 时，所有按钮均不显示

Demo

    <Table TItem="BindItem"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" IsMultipleSelect="true"
           ShowAddButton="false" ShowEditButton="false" ShowExtendButtons="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Count" Sortable="true" />
        </TableColumns>
    </Table>

@code {
    private static readonly Random random = new Random();

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    protected static List<BindItem> GenerateItems() => new List<BindItem>(Enumerable.Range(1, 80).Select(i => new BindItem()
    {
        Id = i,
        Name = $"张三 {i:d4}",
        DateTime = DateTime.Now.AddDays(i - 1),
        Address = $"上海市普陀区金沙江路 {random.Next(1000, 2000)} 弄",
        Count = random.Next(1, 100),
        Complete = random.Next(1, 100) > 50
    }));

    /// <summary>
    /// 
    /// </summary>
    protected static IEnumerable<BindItem> Items { get; } = GenerateItems();

    /// <summary>
    /// 
    /// </summary>
    protected IEnumerable<int> PageItemsSource => new int[] { 2, 4, 10, 20 };
    
    /// <summary>
    /// 
    /// </summary>
    /// <param name="options"></param>
    /// <returns></returns>
    protected Task<QueryData<BindItem>> OnQueryAsync(QueryPageOptions options) => BindItemQueryAsync(Items, options);

    /// <summary>
    /// 
    /// </summary>
    /// <param name="items"></param>
    /// <param name="options"></param>
    /// <returns></returns>
    protected Task<QueryData<BindItem>> BindItemQueryAsync(IEnumerable<BindItem> items, QueryPageOptions options)
    {
        //TODO: 此处代码后期精简
        if (!string.IsNullOrEmpty(SearchModel.Name)) items = items.Where(item => item.Name?.Contains(SearchModel.Name, StringComparison.OrdinalIgnoreCase) ?? false);
        if (!string.IsNullOrEmpty(SearchModel.Address)) items = items.Where(item => item.Address?.Contains(SearchModel.Address, StringComparison.OrdinalIgnoreCase) ?? false);
        if (!string.IsNullOrEmpty(options.SearchText)) items = items.Where(item => (item.Name?.Contains(options.SearchText) ?? false)
                || (item.Address?.Contains(options.SearchText) ?? false));

        // 过滤
        var isFiltered = false;
        if (options.Filters.Any())
        {
            items = items.Where(options.Filters.GetFilterFunc<BindItem>());

            // 通知内部已经过滤数据了
            isFiltered = true;
        }

        // 排序
        var isSorted = false;
        if (!string.IsNullOrEmpty(options.SortName))
        {
            // 外部未进行排序，内部自动进行排序处理
            var invoker = SortLambdaCache.GetOrAdd(typeof(BindItem), key => items.GetSortLambda().Compile());
            items = invoker(items, options.SortName, options.SortOrder);

            // 通知内部已经过滤数据了
            isSorted = true;
        }

        // 设置记录总数
        var total = items.Count();

        // 内存分页
        items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();

        return Task.FromResult(new QueryData<BindItem>()
        {
            Items = items,
            TotalCount = total,
            IsSorted = isSorted,
            IsFiltered = isFiltered,
            IsSearch = !string.IsNullOrEmpty(SearchModel.Name) || !string.IsNullOrEmpty(SearchModel.Address)
        });
    }
}