!2343 feat(#I4RQG7): add SortString parameter on Table component

* doc: 更新 SortString 示例
* feat: 移除 SortList 改用 SortString
* refactor: 移除 SortList 使用 SortString 方便代码编写
* feat: 增加 SortListString 参数用于设置多列排序规则
This commit is contained in:
Argo 2022-01-22 03:44:32 +00:00
parent e7fc250dcd
commit 2629130e39
5 changed files with 17 additions and 18 deletions

View File

@ -122,11 +122,11 @@
</DemoBlock> </DemoBlock>
<DemoBlock Title="动态多列排序" Introduction="设置 <code>OnSort</code> 参数" Name="OnSort"> <DemoBlock Title="动态多列排序" Introduction="设置 <code>OnSort</code> 参数" Name="OnSort">
<p>点击列头进行排序时,组件内部查询前调用此回调,可以在此处根据条件设置 <code>SortList</code> 参数,即可实现动态多列排序功能,本例中点击时间列头进行正序排序时,内部使用 <code>DateTime, Count</code> 倒序时使用 <code>DateTime desc, Count desc</code></p> <p>点击列头进行排序时,组件内部调用 <code>OnSort</code> 回调,可以在此处根据业务逻辑设置其返回值即可实现动态多列排序功能,本例中点击 <b>时间</b> 列头进行正序排序时,内部使用 <code>DateTime, Count</code> 倒序时使用 <code>DateTime desc, Count desc</code></p>
<Table TItem="Foo" <Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource" IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true" IsMultipleSelect="true" IsStriped="true" IsBordered="true" IsMultipleSelect="true"
ShowSkeleton="true" SortList="SortList" OnSort="OnSort" ShowSkeleton="true" SortString="@SortString" OnSort="OnSort"
OnQueryAsync="@OnQueryAsync"> OnQueryAsync="@OnQueryAsync">
<TableColumns> <TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" /> <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />

View File

@ -26,7 +26,7 @@ public partial class TablesFilter
[NotNull] [NotNull]
private IStringLocalizer<Foo>? Localizer { get; set; } private IStringLocalizer<Foo>? Localizer { get; set; }
private List<string> SortList { get; } = new List<string> { "DateTime desc", "Address" }; private string SortString { get; set; } = "DateTime desc, Address";
/// <summary> /// <summary>
/// OnInitialized 方法 /// OnInitialized 方法
@ -81,28 +81,24 @@ public partial class TablesFilter
}); });
} }
private void OnSort(string sortName, SortOrder sortOrder) private string OnSort(string sortName, SortOrder sortOrder)
{ {
string sortString = "";
if (sortName == nameof(Foo.DateTime)) if (sortName == nameof(Foo.DateTime))
{ {
if (sortOrder == SortOrder.Asc) if (sortOrder == SortOrder.Asc)
{ {
SortList.Clear(); sortString = "DateTime, Count";
SortList.Add(nameof(Foo.DateTime));
SortList.Add(nameof(Foo.Count));
} }
else if (sortOrder == SortOrder.Desc) else if (sortOrder == SortOrder.Desc)
{ {
SortList.Clear(); sortString = "DateTime desc, Count desc";
SortList.Add($"{nameof(Foo.DateTime)} desc");
SortList.Add($"{nameof(Foo.Count)} desc");
} }
else else
{ {
SortList.Clear(); sortString = "DateTime desc, Count";
SortList.Add($"{nameof(Foo.DateTime)} desc");
SortList.Add(nameof(Foo.Count));
} }
} }
return sortString;
} }
} }

View File

@ -443,7 +443,7 @@ public partial class Table<TItem>
SearchText = SearchText, SearchText = SearchText,
SortOrder = SortOrder, SortOrder = SortOrder,
SortName = SortName, SortName = SortName,
SortList = SortList, SortList = SortString?.SpanSplit(",", StringSplitOptions.RemoveEmptyEntries),
Filters = Filters.Values, Filters = Filters.Values,
Searchs = GetSearchs(), Searchs = GetSearchs(),
AdvanceSearchs = GetAdvanceSearchs(), AdvanceSearchs = GetAdvanceSearchs(),

View File

@ -44,16 +44,16 @@ public partial class Table<TItem>
public string SortIcon { get; set; } = "fa fa-sort"; public string SortIcon { get; set; } = "fa fa-sort";
/// <summary> /// <summary>
/// 获得/设置 多列排序顺序 默认为空 设置时支持 Order 后缀 "Name" "Age desc" /// 获得/设置 多列排序顺序 默认为空 多列时使用逗号分割 如:"Name, Age desc"
/// </summary> /// </summary>
[Parameter] [Parameter]
public List<string>? SortList { get; set; } public string? SortString { get; set; }
/// <summary> /// <summary>
/// 获得/设置 点击表头排序时回调方法 /// 获得/设置 点击表头排序时回调方法
/// </summary> /// </summary>
[Parameter] [Parameter]
public Action<string, SortOrder>? OnSort { get; set; } public Func<string, SortOrder, string>? OnSort { get; set; }
/// <summary> /// <summary>
/// 获得/设置 内部表头排序时回调方法 /// 获得/设置 内部表头排序时回调方法

View File

@ -663,7 +663,10 @@ public partial class Table<TItem> : BootstrapComponentBase, IDisposable, ITable
IntenralOnSortAsync = async (sortName, sortOrder) => IntenralOnSortAsync = async (sortName, sortOrder) =>
{ {
// 调用 OnSort 回调方法 // 调用 OnSort 回调方法
OnSort?.Invoke(sortName, SortOrder); if (OnSort != null)
{
SortString = OnSort(sortName, SortOrder);
}
// 重新查询 // 重新查询
await QueryAsync(); await QueryAsync();