经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Bootstrap » 查看文章
[硬核] Bootstrap Blazor Table 综合演示例子
来源：cnblogs　　作者：AlexChow　　时间：2023/1/16 9:17:45　　对本文有异议

知识点:

1.导入导出
2.分页功能
3.增删改查
4.批量删除
5.批量编辑(审核)
6.列排序与列搜索
7.顶部搜索实现所有列搜索
8.高级搜索实现多条件搜索
9.顶部与刷新与视图列
10.实现文本类型明细行
11.列的统计
12.隐藏列,时间日期列格式化
13.新窗口打开
14.随机数据
15.自由编辑
16.清空数据
17.模板下载

截图

基础工程

表格组件导出 Excel Word Html Pdf

注入FreeSqlDataService服务,支持全数据导出

更新包

  1. <PackageReference Include="BootstrapBlazor" Version="7.2.3-beta03" />
  2. <PackageReference Include="Densen.FreeSql.Extensions.BootstrapBlazor" Version="7.*" />

Program.cs 添加代码

  1. using Densen.DataAcces.FreeSql;
  2. builder.Services.AddSingleton(typeof(FreeSqlDataService<>));
  3. builder.Services.ConfigureJsonLocalizationOptions(op =>
  4. {
  5.     // 忽略文化信息丢失日志
  6.     op.IgnoreLocalizerMissing = true;
  7. });

Index.razor添加一个 TabItem

Tab 顺便改为懒加载

  1. <Tab IsLazyLoadTabItem="true"> 
  2.     ...
  3.     <TabItem Text="综合演示">
  4.         <ImpExpIII />
  5.     </TabItem>
  6. </Tab>

添加打印预览 Pages\_Host.cshtml

< / body > 前加一句

  1.     <script>
  2.         function printDiv() {
  3.             window.print();
  4.         }
  5.     </script>

数据实体类 Data\SalesChannels.cs

查看代码 
  1. using BootstrapBlazor.Components;
  2. using DocumentFormat.OpenXml.Wordprocessing;
  3. using FreeSql.DataAnnotations;
  4. using Magicodes.ExporterAndImporter.Excel;
  5. using OfficeOpenXml.Table;
  6. using System.ComponentModel;
  7. using System.ComponentModel.DataAnnotations;
  10. namespace b14table.Data;
  12. [ExcelImporter(IsLabelingError = true)]
  13. [ExcelExporter(Name = "导入商品中间表", TableStyle = TableStyles.Light10, AutoFitAllColumn = true)]
  14. [AutoGenerateClass(Searchable = true, Filterable = true, Sortable = true, ShowTips = true)]
  16. public class SalesChannels
  17. {
  18.     [AutoGenerateColumn(Ignore = true)]
  19.     [Column(IsIdentity = true)]
  20.     [DisplayName("序号")]
  21.     public int ID { get; set; }
  23.     [AutoGenerateColumn(ComponentType = typeof(ColorPicker), Width = 30)]
  24.     [DisplayName("级别")]
  25.     public string? Background { get; set; }
  27.     [AutoGenerateColumn(FormatString = "yyyy-MM-dd")]
  28.     [DisplayName("日期")]
  29.     public DateTime Date { get; set; }
  31.     [Required(ErrorMessage = "{0}不能为空")]
  32.     [DisplayName("名称")]
  33.     public string? Name { get; set; }
  35.     [DisplayName("项目数量")]
  36.     public int Projects { get; set; }
  38.     [DisplayName("交单数量")]
  39.     public int Orders { get; set; }
  41.     [DisplayName("结单数量")]
  42.     public int Checkouts { get; set; }
  44.     // 编辑界面无法显示小数, 以后再思考
  45.     [DisplayName("结单率")]
  46.     [AutoGenerateColumn(Readonly = true)]
  47.     public string? CheckoutRates { get => GetCheckoutRates(Checkouts, Orders); set => checkoutRates = value; }
  48.     string? checkoutRates;
  51.     [DisplayName("合格数量")]
  52.     public int Qualifieds { get; set; }
  54.     [DisplayName("合格率")]
  55.     [AutoGenerateColumn(Readonly = true)]
  56.     public string? QualifiedRates { get => GetQualifiedRates(Qualifieds, Checkouts); set => qualifiedRates = value; }
  57.     string? qualifiedRates;
  59.     [DisplayName("总价值")]
  60.     public int Total { get; set; }
  62.     [DisplayName("应收款")]
  63.     public int Receivables { get; set; }
  65.     [DisplayName("已收款")]
  66.     public int Received { get; set; }
  68.     [AutoGenerateColumn(FormatString = "HH:mm:ss")]
  69.     [DisplayName("修改日期")]
  70.     public DateTime ModifiedDate { get; set; } = DateTime.Now;
  72.     [AutoGenerateColumn(TextEllipsis = true, Visible = false, ShowTips = true, ComponentType = typeof(Textarea))]
  73.     [DisplayName("备注")]
  74.     public string? Remark { get; set; }
  76.     [AutoGenerateColumn(Visible = false, ComponentType = typeof(BootstrapInput<decimal>), Width = 80)]
  77.     [DisplayName("Test1")]
  78.     public decimal Test1 { get; set; }
  80.     private string GetCheckoutRates(int checkouts, int orders) => orders > 0 ? (checkouts /(double) orders).ToString("P2") : "0%";
  82.     private string GetQualifiedRates(int qualifieds, int checkouts) => checkouts > 0 ? (qualifieds / (double)checkouts).ToString("P2") : "0%";
  85. }

页面 Pages\ImpExpIII.razor

查看代码 
  1. @page "/impexpiii"
  2. @using b14table.Data 
  3. @using static Blazor100.Service.ImportExportsService
  5. <PageTitle>综合演示</PageTitle>
  7. <InputFile OnChange="OnChange" style="max-width:400px" class="form-control" />
  8. <br />
  10. <Table @ref="list1"
  11.        TItem="SalesChannels"
  12.        IsPagination="true"
  13.        IsStriped="true"
  14.        IsBordered="true"
  15.        IsDetails="true"
  16.        AutoGenerateColumns="true"
  17.        ShowSearch="true"
  18.        ShowEmpty="true" 
  19.        SearchMode="SearchMode.Top"
  20.        ShowToolbar="true"
  21.        ShowExtendButtons="true"
  22.        DataService="DataService"
  23.        OnQueryAsync="DataService.QueryAsync"
  24.        OnSaveAsync="DataService.SaveAsync"
  25.        OnDeleteAsync="DataService.DeleteAsync"
  26.        DoubleClickToEdit="@DoubleClickToEdit"
  27.        IsMultipleSelect="true"
  28.        ShowLineNo="true"
  29.        IsExcel="@IsExcel"
  30.        ShowDetailRow="_ => true"
  31.        ShowCardView="true"
  32.        ShowColumnList="true"
  33.        ShowFooter="true"
  34.        ScrollingDialogContent="true"
  35.        EditDialogIsDraggable="true"
  36.        EditDialogSize="Size.ExtraLarge"
  37.        EditDialogShowMaximizeButton="true"
  38.        ShowExportButton
  39.        OnExportAsync="ExportAsync"
  40.        PageItemsSource="new int[] {10, 20, 50, 100, 200, 500, 1000 }">
  42.     <SearchTemplate>
  43.         <GroupBox Title="搜索">
  44.             <div class="row g-3 form-inline">
  45.                 <div class="col-12 col-sm-6">
  46.                     <BootstrapInput @bind-Value="@context.Name" maxlength="50" ShowLabel="true" />
  47.                 </div>
  48.                 <div class="col-12 col-sm-6">
  49.                     <BootstrapInput @bind-Value="@context.Date" maxlength="500" ShowLabel="true" />
  50.                 </div>
  51.             </div>
  52.         </GroupBox>
  53.     </SearchTemplate>
  54.      
  56.     <DetailRowTemplate>
  57.         <div>备注: @context.Remark </div>
  58.     </DetailRowTemplate>
  60.     <TableFooter Context="context1">
  62.         <TableFooterCell Text="当前页小计:" colspan="4" />
  63.         <TableFooterCell Text="总价值" colspan="3" />
  64.         <TableFooterCell Aggregate="@Aggregate" Field="@nameof(SalesChannels.Total)" />
  66.         <TableFooterCell Text="应收款" colspan="3" />
  67.         <TableFooterCell Aggregate="@Aggregate" Field="@nameof(SalesChannels.Receivables)" />
  69.         <TableFooterCell Text="已收款" colspan="3" />
  70.         <TableFooterCell Aggregate="@Aggregate" Field="@nameof(SalesChannels.Received)" />
  72.     </TableFooter>
  74.     <TableToolbarTemplate>
  75.         <TableToolbarButton TItem="SalesChannels" Color="Color.Primary" Text="自由编辑" OnClick="@IsExcelToggle" />
  76.         <TableToolbarButton TItem="SalesChannels" Color="Color.Warning" Text="随机数据" IsAsync OnClick="@GetDatasAsync" />
  77.         <TableToolbarButton TItem="SalesChannels" Color="Color.Secondary" Text="导入" IsAsync OnClick="@ImportExcel" />
  78.         <TableToolbarButton TItem="SalesChannels" Color="Color.Danger" Text="清空" IsAsync OnClick="EmptyAll" />
  79.         <TableToolbarButton TItem="SalesChannels" Color="Color.Success" Text="模板" IsAsync OnClick="Export模板Async" />
  80.         <TableToolbarButton TItem="SalesChannels" Color="Color.Success" Text="打印" IsAsync OnClickCallback="@PrintPreview" />
  81.         <TableToolbarButton TItem="SalesChannels" Color="Color.Secondary" Text="新窗口打开" IsAsync OnClick="@新窗口打开" />
  82.         <TableToolbarButton TItem="SalesChannels" Color="Color.Secondary" Text="批量审批" IsAsync OnClickCallback="@批量审批" />
  83.     </TableToolbarTemplate>
  85.     <ExportButtonDropdownTemplate>
  86.         <h6 class="dropdown-header">当前页数据</h6>
  87.         <div class="dropdown-item" @onclick="_=>ExportExcelAsync(list1.Rows)">
  88.             <i class="fas fa-file-excel"></i>
  89.             <span>Excel</span>
  90.         </div>
  91.         <div class="dropdown-item" @onclick="_=>ExportWordAsync(list1.Rows)">
  92.             <i class="fas fa-file-word"></i>
  93.             <span>Word</span>
  94.         </div>
  95.         <div class="dropdown-item" @onclick="_=>ExportHtmlAsync(list1.Rows)">
  96.             <i class="fa-brands fa-html5"></i>
  97.             <span>Html</span>
  98.         </div>
  99.         <div class="dropdown-item" @onclick="_=>ExportPDFAsync(list1.Rows)">
  100.             <i class="fas fa-file-pdf"></i>
  101.             <span>PDF</span>
  102.         </div>
  103.         <div class="dropdown-divider"></div>
  104.         <h6 class="dropdown-header">全部数据</h6>
  105.         <div class="dropdown-item" @onclick="_=>ExportExcelAsync(DataService.GetAllItems())">
  106.             <i class="fas fa-file-excel"></i>
  107.             <span>Excel</span>
  108.         </div>
  109.         <div class="dropdown-item" @onclick="_=>ExportWordAsync(DataService.GetAllItems())">
  110.             <i class="fas fa-file-word"></i>
  111.             <span>Word</span>
  112.         </div>
  113.         <div class="dropdown-item" @onclick="_=>ExportHtmlAsync(DataService.GetAllItems())">
  114.             <i class="fa-brands fa-html5"></i>
  115.             <span>Html</span>
  116.         </div>
  117.         <div class="dropdown-item" @onclick="_=>ExportPDFAsync(DataService.GetAllItems())">
  118.             <i class="fas fa-file-pdf"></i>
  119.             <span>PDF</span>
  120.         </div>
  121.     </ExportButtonDropdownTemplate>
  122. </Table>

页面代码 Pages\ImpExpIII.razor

查看代码 
  1. using AmeBlazor.Components;
  2. using b14table.Data;
  3. using Blazor100.Service;
  4. using BootstrapBlazor.Components;
  5. using Densen.DataAcces.FreeSql;
  6. using DocumentFormat.OpenXml.Spreadsheet;
  7. using Microsoft.AspNetCore.Components;
  8. using Microsoft.AspNetCore.Components.Forms;
  9. using Microsoft.JSInterop;
  10. using System.Diagnostics.CodeAnalysis;
  11. using static Blazor100.Service.ImportExportsService;
  13. namespace b14table.Pages
  14. {
  15.     public partial class ImpExpIII
  16.     {
  18.         [Inject]
  19.         IWebHostEnvironment? HostEnvironment { get; set; }
  21.         [Inject]
  22.         [NotNull]
  23.         NavigationManager? NavigationManager { get; set; }
  25.         [Inject]
  26.         [NotNull]
  27.         ImportExportsService? ImportExportsService { get; set; }
  29.         [Inject]
  30.         [NotNull]
  31.         ToastService? ToastService { get; set; }
  33.         [Inject]
  34.         [NotNull]
  35.         FreeSqlDataService<SalesChannels>? DataService { get; set; }
  37.         [NotNull]
  38.         Table<SalesChannels>? list1 { get; set; }
  40.         [Parameter] public int Footercolspan1 { get; set; } = 3;
  42.         [Parameter] public int Footercolspan2 { get; set; } = 2;
  44.         [Parameter] public int Footercolspan3 { get; set; }
  46.         [Parameter] public int FootercolspanTotal { get; set; } = 2;
  48.         [Parameter] public string? FooterText { get; set; } = "合计：";
  50.         [Parameter] public string? FooterText2 { get; set; }
  52.         [Parameter] public string? FooterText3 { get; set; }
  54.         [Parameter] public string? FooterTotal { get; set; }
  56.         /// <summary>
  57.         /// 获得/设置 IJSRuntime 实例
  58.         /// </summary>
  59.         [Inject]
  60.         [NotNull]
  61.         protected IJSRuntime? JsRuntime { get; set; }
  62.         [Parameter] public string? 新窗口打开Url { get; set; } = "https://localhost:7292/";
  64.         // 由于使用了FreeSql ORM 数据服务,可以直接取对象
  65.         [Inject]
  66.         [NotNull]
  67.         IFreeSql? fsql { get; set; }
  69.         [Inject] ToastService? toastService { get; set; }
  70.         [Inject] SwalService? SwalService { get; set; }
  73.         public bool IsExcel { get; set; }
  74.         public bool DoubleClickToEdit { get; set; } = true;
  75.         protected string UploadPath = "";
  76.         protected string? uploadstatus;
  77.         long maxFileSize = 1024 * 1024 * 15;
  78.         string? tempfilename;
  80.         private AggregateType Aggregate { get; set; }
  81.         
  82.         protected async Task GetDatasAsync()
  83.         {
  84.             var datas = GetDemoDatas();
  85.             await fsql.Insert<SalesChannels>().AppendData(datas).ExecuteAffrowsAsync();
  86.             await list1!.QueryAsync();
  87.         }
  89.         protected override async void OnAfterRender(bool firstRender)
  90.         {
  91.             if (firstRender)
  92.             {
  93.                 UploadPath = Path.Combine(HostEnvironment!.WebRootPath, "uploads");
  94.                 if (!Directory.Exists(UploadPath)) Directory.CreateDirectory(UploadPath);
  95.                 await list1!.QueryAsync();
  96.             }
  97.         }
  99.         protected override async Task OnAfterRenderAsync(bool firstRender)
  100.         {
  101.             if (firstRender)
  102.             {
  103.                 //懒的人,直接初始化一些数据用用
  104.                 var res = fsql.Select<SalesChannels>().Count();
  105.                 if (res == 0)
  106.                 {
  107.                     var datas = GetDemoDatas();
  108.                     await fsql.Insert<SalesChannels>().AppendData(datas).ExecuteAffrowsAsync();
  109.                     await list1!.QueryAsync();
  110.                 }
  111.             }
  112.         }
  114.         public List<SalesChannels> GetDemoDatas()
  115.         {
  117.             var list = new List<SalesChannels>();
  118.             for (int i = 0; i < 100; i++)
  119.             {
  120.                 try
  121.                 {
  122.                     var total = Random.Shared.Next(100, 3000);
  123.                     list.Add(new SalesChannels()
  124.                     {
  125.                         ID = i,
  126.                         Name = "渠道" + i,
  127.                         Date = DateTime.Now,
  128.                         Projects = Random.Shared.Next(10, 55),
  129.                         Orders = Random.Shared.Next(3, 10),
  130.                         Qualifieds = i,
  131.                         Total = total,
  132.                         Receivables = total - i,
  133.                         Received = i,
  134.                         Remark= $"{i} 明细行内嵌套另外一个 Table 组件，由于每行都要关联子表数据，出于性能的考虑，此功能采用 懒加载 模式，即点击展开按钮后，再对嵌套 Table 进行数据填充，通过 ShowDetailRow 回调委托可以控制每一行是否显示明细行，本例中通过 Complete 属性来控制是否显示明细行，可通过翻页来测试本功能"
  135.                     });
  137.                 }
  138.                 catch (Exception e)
  139.                 {
  140.                     System.Console.WriteLine(e.Message);
  141.                 }
  142.             }
  143.             return list;
  145.         }
  147.         private Task IsExcelToggle()
  148.         {
  149.             IsExcel = !IsExcel;
  150.             DoubleClickToEdit = !IsExcel;
  151.             StateHasChanged();
  152.             return Task.CompletedTask;
  153.         }
  155.         public async Task<bool> Export模板Async()
  156.         {
  157.             await Export();
  158.             return true;
  159.         }
  161.         private async Task<bool> ExportExcelAsync(IEnumerable<SalesChannels> items) => await ExportAutoAsync(items, ExportType.Excel);
  162.         private async Task<bool> ExportPDFAsync(IEnumerable<SalesChannels> items) => await ExportAutoAsync(items, ExportType.Pdf);
  163.         private async Task<bool> ExportWordAsync(IEnumerable<SalesChannels> items) => await ExportAutoAsync(items, ExportType.Word);
  164.         private async Task<bool> ExportHtmlAsync(IEnumerable<SalesChannels> items) => await ExportAutoAsync(items, ExportType.Html);
  166.         private async Task<bool> ExportAutoAsync(IEnumerable<SalesChannels> items, ExportType exportType = ExportType.Excel)
  167.         {
  168.             if (items == null || !items.Any())
  169.             {
  170.                 await ToastService.Error("提示", "无数据可导出");
  171.                 return false;
  172.             }
  173.             var option = new ToastOption()
  174.             {
  175.                 Category = ToastCategory.Information,
  176.                 Title = "提示",
  177.                 Content = $"导出正在执行,请稍等片刻...",
  178.                 IsAutoHide = false
  179.             };
  180.             // 弹出 Toast
  181.             await ToastService.Show(option);
  182.             await Task.Delay(100);
  185.             // 开启后台进程进行数据处理
  186.             await Export(items?.ToList(), exportType);
  188.             // 关闭 option 相关联的弹窗
  189.             option.Close();
  191.             // 弹窗告知下载完毕
  192.             await ToastService.Show(new ToastOption()
  193.             {
  194.                 Category = ToastCategory.Success,
  195.                 Title = "提示",
  196.                 Content = $"导出成功,请检查数据",
  197.                 IsAutoHide = false
  198.             });
  199.             return true;
  201.         }
  203.         private async Task Export(List<SalesChannels>? items = null, ExportType exportType = ExportType.Excel)
  204.         {
  205.             try
  206.             {
  207.                 if (items == null || !items.Any())
  208.                 {
  209.                     ToastService?.Error($"导出", $"{exportType}出错,无数据可导出");
  210.                     return;
  211.                 }
  212.                 var fileName = items == null ? "模板" : typeof(SalesChannels).Name;
  213.                 var fullName = Path.Combine(UploadPath, fileName);
  214.                 fullName = await ImportExportsService.Export(fullName, items, exportType);
  215.                 fileName = (new System.IO.FileInfo(fullName)).Name;
  216.                 ToastService?.Success("提示", fileName + "已生成");
  218.                 //下载后清除文件
  219.                 NavigationManager.NavigateTo($"uploads/{fileName}", true);
  220.                 _ = Task.Run(() =>
  221.                 {
  222.                     Thread.Sleep(50000);
  223.                     System.IO.File.Delete(fullName);
  224.                 });
  226.             }
  227.             catch (Exception e)
  228.             {
  229.                 ToastService?.Error($"导出", $"{exportType}出错,请检查. {e.Message}");
  230.             }
  231.         }
  233.         public async Task<bool> EmptyAll()
  234.         {
  235.             fsql.Delete<SalesChannels>().Where(a => 1 == 1).ExecuteAffrows();
  236.             await ToastService!.Show(new ToastOption()
  237.             {
  238.                 Category = ToastCategory.Success,
  239.                 Title = "提示",
  240.                 Content = "已清空数据",
  241.             });
  243.             await list1!.QueryAsync();
  244.             return true;
  245.         }
  246.         private async Task ImportExcel()
  247.         {
  248.             if (string.IsNullOrEmpty(tempfilename))
  249.             {
  250.                 ToastService?.Error("提示", "请正确选择文件上传");
  251.                 return;
  252.             }
  253.             var option = new ToastOption()
  254.             {
  255.                 Category = ToastCategory.Information,
  256.                 Title = "提示",
  257.                 Content = "导入文件中,请稍等片刻...",
  258.                 IsAutoHide = false
  259.             };
  260.             // 弹出 Toast
  261.             await ToastService!.Show(option);
  262.             await Task.Delay(100);
  265.             // 开启后台进程进行数据处理
  266.             var isSuccess = await MockImportExcel();
  268.             // 关闭 option 相关联的弹窗
  269.             option.Close();
  271.             // 弹窗告知下载完毕
  272.             await ToastService.Show(new ToastOption()
  273.             {
  274.                 Category = isSuccess ? ToastCategory.Success : ToastCategory.Error,
  275.                 Title = "提示",
  276.                 Content = isSuccess ? "操作成功,请检查数据" : "出现错误,请重试导入或者上传",
  277.                 IsAutoHide = false
  278.             });
  280.             await list1!.QueryAsync();
  281.         }
  282.         private async Task<bool> MockImportExcel()
  283.         {
  284.             var items_temp = await ImportExportsService!.ImportFormExcel<SalesChannels>(tempfilename!);
  285.             if (items_temp.items == null)
  286.             {
  287.                 ToastService?.Error("提示", "文件导入失败: " + items_temp.error);
  288.                 return false;
  289.             }
  290.             //items = SmartCombine(items_temp, items).ToList(); 新数据和老数据合并处理,略100字
  291.             await fsql.Insert<SalesChannels>().AppendData(items_temp!.items.ToList()).ExecuteAffrowsAsync();
  292.             return true;
  293.         }
  295.         protected async Task OnChange(InputFileChangeEventArgs e)
  296.         {
  297.             if (e.File == null) return;
  298.             tempfilename = Path.Combine(UploadPath, e.File.Name);
  299.             await using FileStream fs = new(tempfilename, FileMode.Create);
  300.             using var stream = e.File.OpenReadStream(maxFileSize);
  301.             await stream.CopyToAsync(fs);
  303.             //正式工程此处是回调,简化版必须InvokeAsync一下,自由发挥
  304.             _ = Task.Run(async () => await InvokeAsync(async () => await ImportExcel()));
  306.         }
  308.         /// <summary>
  309.         /// 导出数据方法
  310.         /// </summary>
  311.         /// <param name="Items"></param>
  312.         /// <param name="opt"></param>
  313.         /// <returns></returns>
  314.         protected async Task<bool> ExportAsync(IEnumerable<SalesChannels> Items, QueryPageOptions opt)
  315.         {
  316.             var ret = await ExportExcelAsync(Items);
  317.             return ret;
  318.         }
  320.         public Task PrintPreview(IEnumerable<SalesChannels> item)
  321.         {
  322.             //实际工程自己完善js打印
  323.             JsRuntime.InvokeVoidAsync("printDiv");
  324.             return Task.CompletedTask;
  325.         }
  327.         private Task 新窗口打开()
  328.         {
  329.             if (string.IsNullOrEmpty(新窗口打开Url))
  330.             {
  331.                 ToastService?.Error("提示", "Url为空!");
  332.                 return Task.CompletedTask;
  333.             }
  334.             JsRuntime.NavigateToNewTab(新窗口打开Url);
  335.             return Task.CompletedTask;
  336.         }
  338.         public async Task 批量审批(IEnumerable<SalesChannels> items)
  339.         {
  340.             items.ToList().ForEach(a =>
  341.             {
  342.                 a.Checkouts = a.Orders;
  343.                 a.Receivables = 0;
  344.                 a.Received = a.Total;
  345.                 a.ModifiedDate = DateTime.Now;
  346.             });
  347.             var res = await fsql.Update<SalesChannels>().SetSource(items).ExecuteAffrowsAsync();
  349.             await SwalService!.Show(new SwalOption()
  350.             {
  351.                 Title = res == 0 ? "提示: 操作失败" : "提示: 操作成功"
  353.             });
  354.            if (res != 0) await list1!.QueryAsync();
  356.         }
  360.     }
  361. }

预览

输入图片说明

源代码

https://gitee.com/densen2014/Blazor100/tree/master/b04table

https://github.com/densen2014/Blazor100/tree/master/b04table

项目地址

https://gitee.com/LongbowEnterprise/BootstrapBlazor

项目Wiki

https://gitee.com/LongbowEnterprise/BootstrapBlazor/wikis/QuickStart/[硬核] Table 综合演示例子?sort_id=7452536

原文链接：https://www.cnblogs.com/densen2014/p/17053020.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Bootstrap热门文章

  • BootstrapBlazor + FreeSql ORM 实战 Table 表格组件维护多表数据 - OneToOne
  • [硬核] Bootstrap Blazor Table 综合演示例子
  • 详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
  • Bootstrap 中几种常见的样式
  • 前端插件之Bootstrap Dual Listbox使用教程
  • Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
  • bootstrap中的导航条实例代码详解
  • Bootstrap 按钮样式与使用代码详解
  • YiShaAdmin：一款基于.NET Core Web + Bootstrap的企业级快速开发框架
  • Bootstrap 实现表格样式、表单布局的实例代码

    • Bootstrap推荐文章

  • YiShaAdmin：一款基于.NET Core Web + Bootstrap的企业级快速开发框架
  • .NET中使用BootstrapBlazor组件库Table实操篇
  • [硬核] Bootstrap Blazor Table 综合演示例子
  • 实现简单的csv文件上传和bootstrap表格的下载
  • bootstrap中的导航条实例代码详解
  • Bootstrap 中几种常见的样式
  • Bootstrap 实现表格样式、表单布局的实例代码

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号