From 1770f4c5ee8b14e4cb43e63e7d5a33d8857a993e Mon Sep 17 00:00:00 2001 From: steel Date: Mon, 2 Oct 2023 09:14:43 +0800 Subject: [PATCH] =?UTF-8?q?Table=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E9=AB=98=E7=BA=A7=E6=8E=92=E5=BA=8F(=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E5=A4=9A=E5=88=97=E6=8E=92=E5=BA=8F)=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Samples/Table/TablesFilter.razor | 1 + .../Samples/Table/TablesFilter.razor.cs | 7 ++ .../Components/Table/AdvancedSort.razor | 27 ++++++ .../Components/Table/AdvancedSort.razor.cs | 82 ++++++++++++++++ .../Components/Table/Table.razor | 10 +- .../Components/Table/Table.razor.Edit.cs | 2 + .../Table/Table.razor.Localization.cs | 18 ++++ .../Components/Table/Table.razor.Sort.cs | 94 +++++++++++++++++++ src/BootstrapBlazor/Locales/en.json | 8 ++ src/BootstrapBlazor/Locales/zh.json | 7 ++ .../Options/QueryPageOptions.cs | 5 + 11 files changed, 257 insertions(+), 4 deletions(-) create mode 100644 src/BootstrapBlazor/Components/Table/AdvancedSort.razor create mode 100644 src/BootstrapBlazor/Components/Table/AdvancedSort.razor.cs diff --git a/src/BootstrapBlazor.Shared/Samples/Table/TablesFilter.razor b/src/BootstrapBlazor.Shared/Samples/Table/TablesFilter.razor index 55893b30e..44c69f7f4 100644 --- a/src/BootstrapBlazor.Shared/Samples/Table/TablesFilter.razor +++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesFilter.razor @@ -118,6 +118,7 @@ IsPagination="true" PageItemsSource="@PageItemsSource" IsStriped="true" IsBordered="true" IsMultipleSelect="true" ShowSkeleton="true" SortString="SortList" + ShowToolbar="true" ShowDefaultButtons="false" ShowAdvancedSort="true" OnQueryAsync="@OnQueryAsync"> diff --git a/src/BootstrapBlazor.Shared/Samples/Table/TablesFilter.razor.cs b/src/BootstrapBlazor.Shared/Samples/Table/TablesFilter.razor.cs index 66b84612c..8cf119106 100644 --- a/src/BootstrapBlazor.Shared/Samples/Table/TablesFilter.razor.cs +++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesFilter.razor.cs @@ -47,6 +47,13 @@ public partial class TablesFilter // 排序标记 var isSorted = false; + + //处理高级排序 + if (options.AdvancedSortList.Any()) + { + items = items.Sort(options.AdvancedSortList); + isSorted = true; + } // 此段代码可不写，组件内部自行处理 if (options.SortName == nameof(Foo.DateTime) && options.SortList != null) { diff --git a/src/BootstrapBlazor/Components/Table/AdvancedSort.razor b/src/BootstrapBlazor/Components/Table/AdvancedSort.razor new file mode 100644 index 000000000..257bd7874 --- /dev/null +++ b/src/BootstrapBlazor/Components/Table/AdvancedSort.razor @@ -0,0 +1,27 @@ +@namespace BootstrapBlazor.Components +@inherits ComponentBase +@implements IResultDialog +
+
+
+ + +
+
+ + + +
+
+ +
+
+ +
+
+ + +
diff --git a/src/BootstrapBlazor/Components/Table/AdvancedSort.razor.cs b/src/BootstrapBlazor/Components/Table/AdvancedSort.razor.cs new file mode 100644 index 000000000..28d164fda --- /dev/null +++ b/src/BootstrapBlazor/Components/Table/AdvancedSort.razor.cs @@ -0,0 +1,82 @@ +// 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 Microsoft.Extensions.Localization; + +namespace BootstrapBlazor.Components; + +//S_ADD: +/// +/// Table高级排序弹窗的内容组件 +/// +public partial class AdvancedSort: ComponentBase, IResultDialog +{ + /// + /// 获得/设置 排序列列表 实例值 + /// + [Parameter] + [NotNull] +#if NET6_0_OR_GREATER + [EditorRequired] +#endif + public List? Value { get; set; } + + /// + /// 获得/设置 排序列列表 回调方法 支持双向绑定 + /// + [Parameter] + public EventCallback> ValueChanged { get; set; } + + /// + /// 获得/设置 可排序列的列表 + /// + [Parameter] + public IEnumerable? SortableFields { get; set; } + + /// + /// 获得/设置 无排序列时文本 + /// + [Parameter] + public string? EmptyText { get; set; } + + /// + /// 排序规则列表 + /// + private List? SortOrders { get; set; } + + [Inject] + [NotNull] + private IStringLocalizer? Localizer { get; set; } + + /// + /// + /// + protected override void OnParametersSet() + { + base.OnParametersSet(); + + Value ??= new(); + + EmptyText ??= Localizer[nameof(EmptyText)]; + SortOrders ??= new() + { + new SelectedItem("Asc", Localizer["AscText"].Value), + new SelectedItem("Desc", Localizer["DescText"].Value) + }; + } + + /// + /// + /// + public async Task OnClose(DialogResult result) + { + if (result == DialogResult.Yes) + { + if (ValueChanged.HasDelegate) + { + await ValueChanged.InvokeAsync(Value); + } + } + } +} diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor index bb9724080..4bee13ae4 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor +++ b/src/BootstrapBlazor/Components/Table/Table.razor @@ -66,6 +66,12 @@ { @TableExtensionToolbarBeforeTemplate } + @if (ShowAdvancedSearch)//S_ADD: 高级排序按钮 + { + + } @if (ShowRefresh) { } - @if (ShowAdvancedSearch) - { - @RenderAdvanceSearchButton - } } else if (ShowAdvancedSearch) diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs index 78b4a70d7..1bb2556f8 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs +++ b/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs @@ -562,6 +562,8 @@ public partial class Table queryOption.AdvanceSearches.AddRange(GetAdvanceSearches()); queryOption.CustomerSearches.AddRange(GetCustomerSearches()); + queryOption.AdvancedSortList.AddRange(GetAdvancedSortList()); //S_ADD:传递高级排序的字段列表 + if (!string.IsNullOrEmpty(SortString)) { queryOption.SortList.AddRange(SortString.Split(",", StringSplitOptions.RemoveEmptyEntries)); diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs index a83ce4495..7586bc32c 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs +++ b/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs @@ -343,6 +343,21 @@ public partial class Table [NotNull] public string? DeleteButtonToastResultContent { get; set; } + + /// + /// 获得/设置 高级排序按钮文本 + /// + [Parameter] + [NotNull] + public string? AdvancedSortButtonText { get; set; }//S_ADD:高级排序按钮文本 + + /// + /// 获得/设置 高级排序弹窗文本 + /// + [Parameter] + [NotNull] + public string? AdvancedSortModalTitle { get; set; }//S_ADD:高级排序弹窗文本 + [Inject] [NotNull] private IStringLocalizer>? Localizer { get; set; } @@ -404,5 +419,8 @@ public partial class Table ExportPdfDropdownItemText ??= Localizer[nameof(ExportPdfDropdownItemText)]; CopyColumnTooltipText ??= Localizer[nameof(CopyColumnTooltipText)]; CopyColumnCopiedTooltipText ??= Localizer[nameof(CopyColumnCopiedTooltipText)]; + + AdvancedSortButtonText ??= Localizer[nameof(AdvancedSortButtonText)]; //S_ADD:高级排序按钮文本 + AdvancedSortModalTitle ??= Localizer[nameof(AdvancedSortModalTitle)];//S_ADD:高级排序弹窗文本 } } diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Sort.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Sort.cs index c4c9aee3d..fb69e78a7 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.Sort.cs +++ b/src/BootstrapBlazor/Components/Table/Table.razor.Sort.cs @@ -88,6 +88,9 @@ public partial class Table SortName = col.GetFieldName(); + //清除高级排序 (保证点击Header排序的优先级最高) + AdvancedSortItems.Clear(); //S_ADD: + // 通知 Table 组件刷新数据 await InternalOnSortAsync(SortName, SortOrder); }; @@ -419,4 +422,95 @@ public partial class Table .AddClass(SortIconAsc, SortName == fieldName && SortOrder == SortOrder.Asc) .AddClass(SortIconDesc, SortName == fieldName && SortOrder == SortOrder.Desc) .Build(); + + //S_ADD:高级排序相关 + #region AdvancedSort + /// + /// 获得 高级排序样式 + /// + protected string? AdvancedSortClass => CssBuilder.Default("btn btn-secondary") + .AddClass("btn-info", AdvancedSortItems.Any) + .Build(); + + /// + /// 获得/设置 是否显示高级排序按钮 默认 false 不显示 /> + /// + [Parameter] + public bool ShowAdvancedSort { get; set; } = false; + + /// + /// 获得/设置 高级排序按钮图标 + /// + [Parameter] + public string? AdvancedSortButtonIcon { get; set; } + + /// + /// 获得/设置 高级排序框的大小 默认 Medium + /// + [Parameter] + public Size AdvancedSortDialogSize { get; set; } = Size.Medium; + + /// + /// 获得/设置 高级排序框是否可以拖拽 默认 false 不可以拖拽 + /// + [Parameter] + public bool AdvancedSortDialogIsDraggable { get; set; } + + /// + /// 获得/设置 高级排序框是否显示最大化按钮 默认 false 不显示 + /// + [Parameter] + public bool AdvancedSortDialogShowMaximizeButton { get; set; } = false; + + /// + /// 获得/设置 高级排序，默认为 empty + /// + [Parameter] + public List AdvancedSortItems { get; set; } = new(); + + /// + /// 高级排序按钮点击时调用此方法 + /// + private async Task ShowSortDialog() + { + var result = await DialogService.ShowModal(new ResultDialogOption + { + Title = AdvancedSortModalTitle, + Size = AdvancedSortDialogSize, + IsDraggable=AdvancedSortDialogIsDraggable, + ShowMaximizeButton = AdvancedSortDialogShowMaximizeButton, + ComponentParamters = new Dictionary + { + [nameof(AdvancedSort.Value)] = AdvancedSortItems, + [nameof(AdvancedSort.ValueChanged)] = EventCallback.Factory.Create>(this, v => AdvancedSortItems = v), + [nameof(AdvancedSort.SortableFields)] = Columns.Where(p => p.Sortable).Select(p => new SelectedItem(p.GetFieldName(), p.GetDisplayName())) + } + }); + if (result == DialogResult.Yes) + { + await QueryAsync(); + } + } + + /// + /// 获得 中过滤条件 + /// + /// + protected List GetAdvancedSortList() => ShowAdvancedSort ? AdvancedSortItems.Select(p => $"{p.SortName} {p.SortOrder}").ToList() : new(); + #endregion +} + +/// +/// 排序项 (高级排序使用) +/// +public class SortItem +{ + /// + /// 排序字段名 + /// + public string SortName { get; set; } = string.Empty; + /// + /// 排序顺序 + /// + public string SortOrder { get; set; } = string.Empty; } diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json index 4e8e1e86b..d53402a6b 100644 --- a/src/BootstrapBlazor/Locales/en.json +++ b/src/BootstrapBlazor/Locales/en.json @@ -191,6 +191,8 @@ "SearchButtonText": "Search", "ResetSearchButtonText": "Reset", "AdvanceButtonText": "Advanced Search", + "AdvancedSortModalTitle": "Sort", + "AdvancedSortButtonText": "Advanced Sort", "CheckboxDisplayText": "All", "EditModalTitle": "Edit", "AddModalTitle": "New", @@ -340,5 +342,11 @@ "NotContains": "NotContains", "GroupText": "Group", "ItemText": "Item" + }, + + "BootstrapBlazor.Components.AdvancedSort": { + "EmptyText": "No-collation", + "AscText": "Ascending", + "DescText": "Descending" } } diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json index 10a78952c..1fe35b481 100644 --- a/src/BootstrapBlazor/Locales/zh.json +++ b/src/BootstrapBlazor/Locales/zh.json @@ -191,6 +191,8 @@ "SearchButtonText": "搜索", "ResetSearchButtonText": "清空搜索", "AdvanceButtonText": "高级搜索", + "AdvancedSortModalTitle": "自定义排序", + "AdvancedSortButtonText": "高级排序", "CheckboxDisplayText": "选择", "EditModalTitle": "编辑窗口", "AddModalTitle": "新建窗口", @@ -340,5 +342,10 @@ "NotContains": "不包含", "GroupText": "组合条件", "ItemText": "单行条件" + }, + "BootstrapBlazor.Components.AdvancedSort": { + "EmptyText": "无排序条件", + "AscText": "升序", + "DescText": "降序" } } diff --git a/src/BootstrapBlazor/Options/QueryPageOptions.cs b/src/BootstrapBlazor/Options/QueryPageOptions.cs index d388851b6..06755279d 100644 --- a/src/BootstrapBlazor/Options/QueryPageOptions.cs +++ b/src/BootstrapBlazor/Options/QueryPageOptions.cs @@ -29,6 +29,11 @@ public class QueryPageOptions /// public List SortList { get; } = new(10); + /// + /// 获得/设置 自定义多列排序集合 默认为 Empty 内部为 "Name" "Age desc" 由 设置 + /// + public List AdvancedSortList { get; } = new(10); //S_ADD: + /// /// 获得 搜索条件绑定模型 未设置 时为 泛型模型 /// -- Gitee