Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Table 表格在弹窗内使用

用于带层级关系的数据选择中

点击工具栏中的选择按钮弹出对话框选择候选数据

Demo

本例中展示如果通过 Modal 组件与 Table 进行联动,通过弹窗中选择数据,然后再进行编辑

  • 点击 选择 按钮弹出对话框选择产品 Product
  • 弹窗中选择产品后点击 确定 按钮关闭弹窗
  • 点击 编辑 按钮,由于设置部分数据为只读,只能更改 Count 字段
Loading...
@page "/tables/dialog"

<h3>Table 表格在弹窗内使用</h3>

<h4>用于带层级关系的数据选择中</h4>

<Block Title="弹窗中数据联动" Introduction="点击工具栏中的选择按钮弹出对话框选择候选数据">
    <p>本例中展示如果通过 <code>Modal</code> 组件与 <code>Table</code> 进行联动,通过弹窗中选择数据,然后再进行编辑</p>
    <ul class="ul-demo">
        <li>点击 <code>选择</code> 按钮弹出对话框选择产品 <code>Product</code></li>
        <li>弹窗中选择产品后点击 <code>确定</code> 按钮关闭弹窗</li>
        <li>点击 <code>编辑</code> 按钮,由于设置部分数据为只读,只能更改 <code>Count</code> 字段</li>
    </ul>
    <Table TItem="Foo" @ref="ProductTable"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowDefaultButtons="true" ShowAddButton="false" IsMultipleSelect="true" ShowExtendButtons="true"
           OnQueryAsync="@OnQueryEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableToolbarTemplate>
            <TableToolbarButton TItem="Foo" Color="Color.Primary" Icon="fa fa-fw fa-edit" Text="选择" OnClickCallback="@ShowDialog" />
        </TableToolbarTemplate>
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Readonly="true" />
            <TableColumn @bind-Field="@context.Name" Readonly="true" />
            <TableColumn @bind-Field="@context.Count" Width="80" />
        </TableColumns>
    </Table>
</Block>

<Modal @ref="Modal">
    <ModalDialog Title="选择项目" IsCentered="true">
        <BodyTemplate>
            <Table TItem="Foo" IsStriped="true" @bind-SelectedRows="@SelectedRows" ClickToSelect="true"
                   ShowToolbar="true" ShowDefaultButtons="false" IsMultipleSelect="true"
                   OnQueryAsync="@OnQueryProductAsync" HeaderStyle="TableHeaderStyle.Light">
                <TableColumns>
                    <TableColumn @bind-Field="@context.DateTime" />
                    <TableColumn @bind-Field="@context.Name" />
                    <TableColumn @bind-Field="@context.Count" />
                </TableColumns>
            </Table>
        </BodyTemplate>
        <FooterTemplate>
            <Button Text="确定" Icon="fa fa-check-square-o" OnClick="@OnConfirm" />
        </FooterTemplate>
    </ModalDialog>
</Modal>
// 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;
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 TablesDialog
    {
        private static readonly Random random = new Random();

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

        [NotNull]
        private Modal? Modal { get; set; }

        [NotNull]
        private Table<Foo>? ProductTable { get; set; }

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

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

        private bool _confirm;

        private List<Foo> SelectedRows { get; set; } = new List<Foo>();

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

            Products = new List<Foo>();

            ProductSelectItems = Enumerable.Range(1, 5).Select(i => new Foo()
            {
                Id = i,
                Name = Localizer["Foo.Name", $"{i:d4}"],
                DateTime = DateTime.Now.AddDays(i - 1),
                Address = Localizer["Foo.Address", $"{random.Next(1000, 2000)}"],
                Count = random.Next(1, 100),
                Complete = random.Next(1, 100) > 50,
                Education = EnumEducation.Primary,
                Hobby = new string[] { "1" }
            }).ToList();
        }

        private async Task ShowDialog(IEnumerable<Foo> items)
        {
            await Modal.Toggle();
        }

        private async Task OnConfirm()
        {
            _confirm = true;
            await Modal.Toggle();
            await ProductTable.QueryAsync();
        }

        private Task<bool> OnSaveAsync(Foo item, ItemChangedType changedType)
        {
            var oldItem = Products.FirstOrDefault(i => i.Id == item.Id);
            if (oldItem != null)
            {
                oldItem.Count = item.Count;
            }
            return Task.FromResult(true);
        }

        private Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
        {
            Products.RemoveAll(p => items.Contains(p));
            return Task.FromResult(true);
        }

        private Task<QueryData<Foo>> OnQueryEditAsync(QueryPageOptions options)
        {
            var items = Products;
            if (_confirm)
            {
                items.Clear();
                items.AddRange(SelectedRows);
            }
            _confirm = false;

            var total = items.Count;
            // 内存分页
            items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
            return Task.FromResult(new QueryData<Foo>()
            {
                Items = items,
                TotalCount = total,
                IsFiltered = true,
                IsSearch = true,
                IsSorted = true
            });
        }

        private Task<QueryData<Foo>> OnQueryProductAsync(QueryPageOptions options)
        {
            var items = ProductSelectItems;

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

            return Task.FromResult(new QueryData<Foo>()
            {
                Items = items,
                TotalCount = total,
            });
        }
    }
}

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