硬核BootstrapBlazorTable综合演示例子

　　知识点：
　　1。导入导出
　　2。分页功能
　　3。增删改查
　　4。批量删除
　　5。批量编辑（审核）
　　6。列排序与列搜索
　　7。顶部搜索实现所有列搜索
　　8。高级搜索实现多条件搜索
　　9。顶部与刷新与视图列
　　10。实现文本类型明细行
　　11。列的统计
　　12。隐藏列，时间日期列格式化
　　13。新窗口打开
　　14。随机数据
　　15。自由编辑
　　16。清空数据
　　17。模板下载截图
　　基础工程
　　表格组件导出ExcelWordHtmlPdf
　　WikiGitee。com注入FreeSqlDataService服务，支持全数据导出
　　更新包PackageReferenceIncludeBootstrapBlazorVersion7。2。3beta03PackageReferenceIncludeDensen。FreeSql。Extensions。BootstrapBlazorVersion7。
　　Program。cs添加代码usingDensen。DataAcces。FreeSbuilder。Services。AddSingleton（typeof（FreeSqlDataService））；builder。Services。ConfigureJsonLocalizationOptions（op｛忽略文化信息丢失ahrefhttps：www。bs178。comrizhitargetblankclassinfotextkey日志aop。IgnoreLocalizerM｝）；Index。razor添加一个TabItem
　　Tab顺便改为懒加载TabIsLazyLoadTabItemtrue。。。TabItemText综合演示ImpExpIIITabItemTab添加打印预览PagesHost。cshtml
　　body前加一句数据实体类DataSalesChannels。cs
　　查看代码usingBootstrapBlazor。CusingDocumentFormat。OpenXml。WusingFreeSql。DataAusingMagicodes。ExporterAndImporter。EusingOfficeOpenXml。TusingSystem。ComponentMusingSystem。ComponentModel。DataAnamespaceb14table。D〔ExcelImporter（IsLabelingErrortrue）〕〔ExcelExporter（Name导入商品中间表，TableStyleTableStyles。Light10，AutoFitAllColumntrue）〕〔AutoGenerateClass（Searchabletrue，Filterabletrue，Sortabletrue，ShowTipstrue）〕publicclassSalesChannels｛〔AutoGenerateColumn（Ignoretrue）〕〔Column（IsIdentitytrue）〕〔DisplayName（序号）〕publicintID｛｝〔AutoGenerateColumn（ComponentTypetypeof（ColorPicker），Width30）〕〔DisplayName（级别）〕publicstring？Background｛｝〔AutoGenerateColumn（FormatStringyyyyMMdd）〕〔DisplayName（日期）〕publicDateTimeDate｛｝〔Required（ErrorMessage｛0｝不能为空）〕〔DisplayName（名称）〕publicstring？Name｛｝〔DisplayName（项目数量）〕publicintProjects｛｝〔DisplayName（交单数量）〕publicintOrders｛｝〔DisplayName（结单数量）〕publicintCheckouts｛｝编辑界面无法显示小数，以后再思考〔DisplayName（结单率）〕〔AutoGenerateColumn（Readonlytrue）〕publicstring？CheckoutRates｛getGetCheckoutRates（Checkouts，Orders）；setcheckoutR｝string？checkoutR〔DisplayName（合格数量）〕publicintQualifieds｛｝〔DisplayName（合格率）〕〔AutoGenerateColumn（Readonlytrue）〕publicstring？QualifiedRates｛getGetQualifiedRates（Qualifieds，Checkouts）；setqualifiedR｝string？qualifiedR〔DisplayName（总价值）〕publicintTotal｛｝〔DisplayName（应收款）〕publicintReceivables｛｝〔DisplayName（已收款）〕publicintReceived｛｝〔AutoGenerateColumn（FormatStringHH：mm：ss）〕〔DisplayName（修改日期）〕publicDateTimeModifiedDate｛｝DateTime。N〔AutoGenerateColumn（TextEllipsistrue，Visiblefalse，ShowTipstrue，ComponentTypetypeof（Textarea））〕〔DisplayName（备注）〕publicstring？Remark｛｝〔AutoGenerateColumn（Visiblefalse，ComponentTypetypeof（BootstrapInputdecimal），Width80）〕〔DisplayName（Test1）〕publicdecimalTest1｛｝privatestringGetCheckoutRates（intcheckouts，intorders）orders0？（checkouts（double）orders）。ToString（P2）：0；privatestringGetQualifiedRates（intqualifieds，intcheckouts）checkouts0？（qualifieds（double）checkouts）。ToString（P2）：0；｝页面PagesImpExpIII。razor
　　查看代码pageimpexpiiiusingb14table。DatausingstaticBlazor100。Service。ImportExportsServicePageTitle综合演示PageTitleInputFileOnChangeOnChangestylemaxwidth：400pxclassformcontrolbrTablereflist1TItemSalesChannelsIsPaginationtrueIsStripedtrueIsBorderedtrueIsDetailstrueAutoGenerateColumnstrueShowSearchtrueShowEmptytrueSearchModeSearchMode。TopShowToolbartrueShowExtendButtonstrueDataServiceDataServiceOnQueryAsyncDataService。QueryAsyncOnSaveAsyncDataService。SaveAsyncOnDeleteAsyncDataService。DeleteAsyncDoubleClickToEditDoubleClickToEditIsMultipleSelecttrueShowLineNotrueIsExcelIsExcelShowDetailRowtrueShowCardViewtrueShowColumnListtrueShowFootertrueScrollingDialogContenttrueEditDialogIsDraggabletrueEditDialogSizeSize。ExtraLargeEditDialogShowMaximizeButtontrueShowExportButtonOnExportAsyncExportAsyncPageItemsSourcenewint〔〕｛10，20，50，100，200，500，1000｝SearchTemplateGroupBoxTitle搜索BootstrapInputbindValuecontext。Namemaxlength50ShowLabeltrueBootstrapInputbindValuecontext。Datemaxlength500ShowLabeltrueGroupBoxSearchTemplateDetailRowTemplate备注：context。RemarkDetailRowTemplateTableFooterContextcontext1TableFooterCellText当前页小计：colspan4TableFooterCellText总价值colspan3TableFooterCellAggregateAggregateFieldnameof（SalesChannels。Total）TableFooterCellText应收款colspan3TableFooterCellAggregateAggregateFieldnameof（SalesChannels。Receivables）TableFooterCellText已收款colspan3TableFooterCellAggregateAggregateFieldnameof（SalesChannels。Received）TableFooterTableToolbarTemplateTableToolbarButtonTItemSalesChannelsColorColor。PrimaryText自由编辑OnClickIsExcelToggleTableToolbarButtonTItemSalesChannelsColorColor。WarningText随机数据IsAsyncOnClickGetDatasAsyncTableToolbarButtonTItemSalesChannelsColorColor。SecondaryText导入IsAsyncOnClickImportExcelTableToolbarButtonTItemSalesChannelsColorColor。DangerText清空IsAsyncOnClickEmptyAllTableToolbarButtonTItemSalesChannelsColorColor。SuccessText模板IsAsyncOnClickExport模板AsyncTableToolbarButtonTItemSalesChannelsColorColor。SuccessText打印IsAsyncOnClickCallbackPrintPreviewTableToolbarButtonTItemSalesChannelsColorColor。SecondaryText新窗口打开IsAsyncOnClick新窗口打开TableToolbarButtonTItemSalesChannelsColorColor。SecondaryText批量审批IsAsyncOnClickCallback批量审批TableToolbarTemplateExportButtonDropdownTemplateh6classdropdownheader当前页数据h6ExportExcelAsync（list1。Rows）iclassfasfafileexcelispanExcelspanExportWordAsync（list1。Rows）iclassfasfafilewordispanWordspanExportHtmlAsync（list1。Rows）iclassfabrandsfahtml5ispanHtmlspanExportPDFAsync（list1。Rows）iclassfasfafilepdfispanPDFspanh6classdropdownheader全部数据h6ExportExcelAsync（DataService。GetAllItems（））iclassfasfafileexcelispanExcelspanExportWordAsync（DataService。GetAllItems（））iclassfasfafilewordispanWordspanExportHtmlAsync（DataService。GetAllItems（））iclassfabrandsfahtml5ispanHtmlspanExportPDFAsync（DataService。GetAllItems（））iclassfasfafilepdfispanPDFspanExportButtonDropdownTemplateTable页面代码PagesImpExpIII。razor
　　查看代码usingAmeBlazor。Cusingb14table。DusingBlazor100。SusingBootstrapBlazor。CusingDensen。DataAcces。FreeSusingDocumentFormat。OpenXml。SusingMicrosoft。AspNetCore。CusingMicrosoft。AspNetCore。Components。FusingMicrosoft。JSIusingSystem。Diagnostics。CodeAusingstaticBlazor100。Service。ImportExportsSnamespaceb14table。Pages｛publicpartialclassImpExpIII｛〔Inject〕IWebHostEnvironment？HostEnvironment｛｝〔Inject〕〔NotNull〕NavigationManager？NavigationManager｛｝〔Inject〕〔NotNull〕ImportExportsService？ImportExportsService｛｝〔Inject〕〔NotNull〕ToastService？ToastService｛｝〔Inject〕〔NotNull〕FreeSqlDataServiceSalesChannels？DataService｛｝〔NotNull〕TableSalesChannels？list1｛｝〔Parameter〕publicintFootercolspan1｛｝3；〔Parameter〕publicintFootercolspan2｛｝2；〔Parameter〕publicintFootercolspan3｛｝〔Parameter〕publicintFootercolspanTotal｛｝2；〔Parameter〕publicstring？FooterText｛｝合计：；〔Parameter〕publicstring？FooterText2｛｝〔Parameter〕publicstring？FooterText3｛｝〔Parameter〕publicstring？FooterTotal｛｝summary获得设置IJSRuntime实例summary〔Inject〕〔NotNull〕protectedIJSRuntime？JsRuntime｛｝〔Parameter〕publicstring？新窗口打开Url｛｝https：localhost：7292；由于使用了FreeSqlORM数据服务，可以直接取对象〔Inject〕〔NotNull〕IFreeSql？fsql｛｝〔Inject〕ToastService？toastService｛｝〔Inject〕SwalService？SwalService｛｝publicboolIsExcel｛｝publicboolDoubleClickToEdit｛｝protectedstringUploadPprotectedstring？longmaxFileSize1024102415；string？privateAggregateTypeAggregate｛｝protectedasyncTaskGetDatasAsync（）｛vardatasGetDemoDatas（）；awaitfsql。InsertSalesChannels（）。AppendData（datas）。ExecuteAffrowsAsync（）；awaitlist1！。QueryAsync（）；｝protectedoverrideasyncvoidOnAfterRender（boolfirstRender）｛if（firstRender）｛UploadPathPath。Combine（HostEnvironment！。WebRootPath，uploads）；if（！Directory。Exists（UploadPath））Directory。CreateDirectory（UploadPath）；awaitlist1！。QueryAsync（）；｝｝protectedoverrideasyncTaskOnAfterRenderAsync（boolfirstRender）｛if（firstRender）｛懒的人，直接初始化一些数据用用varresfsql。SelectSalesChannels（）。Count（）；if（res0）｛vardatasGetDemoDatas（）；awaitfsql。InsertSalesChannels（）。AppendData（datas）。ExecuteAffrowsAsync（）；awaitlist1！。QueryAsync（）；｝｝｝publicListSalesChannelsGetDemoDatas（）｛varlistnewListSalesChannels（）；for（inti0；i100；i）｛try｛vartotalRandom。Shared。Next（100，3000）；list。Add（newSalesChannels（）｛IDi，Name渠道i，DateDateTime。Now，ProjectsRandom。Shared。Next（10，55），OrdersRandom。Shared。Next（3，10），Qualifiedsi，Totaltotal，Receivablestotali，Receivedi，Remark34；｛i｝明细行内嵌套另外一个Table组件，由于每行都要关联子表数据，出于性能的考虑，此功能采用懒加载模式，即点击展开按钮后，再对嵌套Table进行数据填充，通过ShowDetailRow回调委托可以控制每一行是否显示明细行，本例中通过Complete属性来控制是否显示明细行，可通过翻页来测试本功能｝）；｝catch（Exceptione）｛System。Console。WriteLine（e。Message）；｝｝｝privateTaskIsExcelToggle（）｛IsExcel！IsEDoubleClickToEdit！IsEStateHasChanged（）；returnTask。CompletedT｝publicasyncTaskboolExport模板Async（）｛awaitExport（）；｝privateasyncTaskboolExportExcelAsync（IEnumerableSalesChannelsitems）awaitExportAutoAsync（items，ExportType。Excel）；privateasyncTaskboolExportPDFAsync（IEnumerableSalesChannelsitems）awaitExportAutoAsync（items，ExportType。Pdf）；privateasyncTaskboolExportWordAsync（IEnumerableSalesChannelsitems）awaitExportAutoAsync（items，ExportType。Word）；privateasyncTaskboolExportHtmlAsync（IEnumerableSalesChannelsitems）awaitExportAutoAsync（items，ExportType。Html）；privateasyncTaskboolExportAutoAsync（IEnumerableSalesChannelsitems，ExportTypeexportTypeExportType。Excel）｛if（itemsnull！items。Any（））｛awaitToastService。Error（提示，无数据可导出）；｝varoptionnewToastOption（）｛CategoryToastCategory。Information，Title提示，Content34；导出正在执行，请稍等片刻。。。，IsAutoHidefalse｝；弹出ToastawaitToastService。Show（option）；awaitTask。Delay（100）；开启后台进程进行数据处理awaitExport（items？。ToList（），exportType）；关闭option相关联的弹窗option。Close（）；弹窗告知下载完毕awaitToastService。Show（newToastOption（）｛CategoryToastCategory。Success，Title提示，Content34；导出成功，请检查数据，IsAutoHidefalse｝）；｝privateasyncTaskExport（ListSalesChannels？itemsnull，ExportTypeexportTypeExportType。Excel）｛try｛if（itemsnull！items。Any（））｛ToastService？。Error（34；导出，34；｛exportType｝出错，无数据可导出）；｝varfileNameitemsnull？模板：typeof（SalesChannels）。NvarfullNamePath。Combine（UploadPath，fileName）；fullNameawaitImportExportsService。Export（fullName，items，exportType）；fileName（newSystem。IO。FileInfo（fullName））。NToastService？。Success（提示，fileName已生成）；下载后清除文件NavigationManager。NavigateTo（34；uploads｛fileName｝，true）；Task。Run（（）｛Thread。Sleep（50000）；System。IO。File。Delete（fullName）；｝）；｝catch（Exceptione）｛ToastService？。Error（34；导出，34；｛exportType｝出错，请检查。｛e。Message｝）；｝｝publicasyncTaskboolEmptyAll（）｛fsql。DeleteSalesChannels（）。Where（a11）。ExecuteAffrows（）；awaitToastService！。Show（newToastOption（）｛CategoryToastCategory。Success，Title提示，Content已清空数据，｝）；awaitlist1！。QueryAsync（）；｝privateasyncTaskImportExcel（）｛if（string。IsNullOrEmpty（tempfilename））｛ToastService？。Error（提示，请正确选择文件上传）；｝varoptionnewToastOption（）｛CategoryToastCategory。Information，Title提示，Content导入文件中，请稍等片刻。。。，IsAutoHidefalse｝；弹出ToastawaitToastService！。Show（option）；awaitTask。Delay（100）；开启后台进程进行数据处理varisSuccessawaitMockImportExcel（）；关闭option相关联的弹窗option。Close（）；弹窗告知下载完毕awaitToastService。Show（newToastOption（）｛CategoryisSuccess？ToastCategory。Success：ToastCategory。Error，Title提示，ContentisSuccess？操作成功，请检查数据：出现错误，请重试导入或者上传，IsAutoHidefalse｝）；awaitlist1！。QueryAsync（）；｝privateasyncTaskboolMockImportExcel（）｛varitemstempawaitImportExportsService！。ImportFormExcelSalesChannels（tempfilename！）；if（itemstemp。itemsnull）｛ToastService？。Error（提示，文件导入失败：itemstemp。error）；｝itemsSmartCombine（itemstemp，items）。ToList（）；新数据和老数据合并处理，略100字awaitfsql。InsertSalesChannels（）。AppendData（itemstemp！。items。ToList（））。ExecuteAffrowsAsync（）；｝protectedasyncTaskOnChange（InputFileChangeEventArgse）｛if（e。Filenull）tempfilenamePath。Combine（UploadPath，e。File。Name）；awaitusingFileStreamfsnew（tempfilename，FileMode。Create）；usingvarstreame。File。OpenReadStream（maxFileSize）；awaitstream。CopyToAsync（fs）；正式工程此处是回调，简化版必须InvokeAsync一下，自由发挥Task。Run（async（）awaitInvokeAsync（async（）awaitImportExcel（）））；｝summary导出数据方法summaryparamnameItemsparamparamnameoptparamreturnsreturnsprotectedasyncTaskboolExportAsync（IEnumerableSalesChannelsItems，QueryPageOptionsopt）｛varretawaitExportExcelAsync（Items）；｝publicTaskPrintPreview（IEnumerableSalesChannelsitem）｛实际工程自己完善js打印JsRuntime。InvokeVoidAsync（printDiv）；returnTask。CompletedT｝privateTask新窗口打开（）｛if（string。IsNullOrEmpty（新窗口打开Url））｛ToastService？。Error（提示，Url为空！）；returnTask。CompletedT｝JsRuntime。NavigateToNewTab（新窗口打开Url）；returnTask。CompletedT｝publicasyncTask批量审批（IEnumerableSalesChannelsitems）｛items。ToList（）。ForEach（a｛a。Checkoutsa。Oa。Receivables0；a。Receiveda。Ta。ModifiedDateDateTime。N｝）；varresawaitfsql。UpdateSalesChannels（）。SetSource（items）。ExecuteAffrowsAsync（）；awaitSwalService！。Show（newSwalOption（）｛Titleres0？提示：操作失败：提示：操作成功｝）；if（res！0）awaitlist1！。QueryAsync（）；｝｝｝预览
　　源代码
　　https：gitee。comdensen2014Blazor100treemasterb04table
　　https：git可hu删b。comdensen2014Blazor100treemasterb04table项目地址
　　https：gitee。comLongbowEnterpriseBootstrapBlazor项目Wiki
　　https：gitee。comLongbowEnterpriseBootstrapBlazorwikisQuickStart〔硬核〕Table综合演示例子？sortid7452536关联项目
　　FreeSql
　　BABlazor知识共享许可协议
　　本作品采用知识共享署名非商业性使用相同方式共享4。0国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名AlexChow，不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系。转载声明
　　本文来自博客园，作者：周创琳AlexChow，转载请注明原文链接：https：www。cnblogs。comdensen2014p17053020。htmlAlexChow
　　今日头条博客园知乎Gitee