Skip to content

Commit 227ead3

Browse files
momijijinArgoZhang
momijijin
and
ArgoZhang
authored
feat(Table): add ShowSearchInColumnList parameter (#7346)
* feat(Table): add 'ShowColumnListSelectExtension' parameter * feat(Table): add search col.Name and InverseSelected in ColumnListSelectExtension * style(Table): add ColumnListSelectExtension i18n cfg * style(Table): add InverseSelectedButtonText i18n cfg * fix(Table): Consider invoking await OnToggleColumnVisible after updating first visible. * refactor: 重构代码 * refactor: 重构代码 * refactor: 重构代码 * refactor: 重构代码 * doc: 增加多语言 * feat(Table): add ShowColumnListControls parameter * style: 更新滚动条样式 * test: 增加单元测试 * doc: 更新示例文档 --------- Co-Authored-By: jin momiji <105467851+momijijin@users.noreply.github.com> Co-authored-by: Argo Zhang <argo@live.ca>
1 parent e53b005 commit 227ead3

12 files changed

Lines changed: 136 additions & 30 deletions

File tree

‎src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnList.razor‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/table/column/list"
1+
@page "/table/column/list"
22
@inject IStringLocalizer<NavMenu> NavMenuLocalizer
33
@inject IStringLocalizer<TablesColumnList> Localizer
44
@inject IOptions<WebsiteOptions> WebsiteOption
@@ -13,6 +13,7 @@
1313
Name="Visible">
1414
<section ignore>
1515
<p>@((MarkupString)Localizer["VisibleP1"].Value)</p>
16+
<p>@((MarkupString)Localizer["ShowColumnListControlsDesc"].Value)</p>
1617
<p>@((MarkupString)Localizer["VisibleP2"].Value)</p>
1718
<p>@((MarkupString)Localizer["VisibleP3"].Value)</p>
1819
<p>@((MarkupString)Localizer["VisibleP4"].Value)</p>
@@ -22,9 +23,9 @@
2223

2324
<Table TItem="Foo" @ref="TableColumnVisible"
2425
IsPagination="true" PageItemsSource="@PageItemsSource"
25-
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
26+
IsStriped="true" IsBordered="true" IsMultipleSelect="true" ShowColumnListControls="true"
2627
ShowToolbar="true" ShowAddButton="false" ShowEditButton="false" ShowDeleteButton="false"
27-
ShowExtendButtons="false" ShowColumnList="true" ClientTableName="testtable"
28+
ShowExtendButtons="false" ShowColumnList="true" ClientTableName="test_table"
2829
OnQueryAsync="@OnQueryAsync">
2930
<TableColumns>
3031
<TableColumn @bind-Field="@context.DateTime" Width="180" />

‎src/BootstrapBlazor.Server/Locales/en-US.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5156,7 +5156,8 @@
51565156
"VisibleP3": "In this example, the <b>quantity</b> column is not displayed by setting <code>Visible</code>, and it can be displayed through the column control button",
51575157
"VisibleP4": "Trigger the <code>OnColumnVisibleChanged</code> callback when switch the column state <b>Show/Hide</b>",
51585158
"ResetVisibleColumnsButtonText": "Set Columns",
5159-
"ResetVisibleColumnsDesc": "Call the instancel method <code>ResetVisibleColumns</code> of <code>Table</code> for set the multiple columns visible value"
5159+
"ResetVisibleColumnsDesc": "Call the instancel method <code>ResetVisibleColumns</code> of <code>Table</code> for set the multiple columns visible value",
5160+
"ShowColumnListControlsDesc": "The <code>ShowColumnListControls</code> setting controls whether the column dropdown list displays control buttons. The built-in control buttons are <code>All</code> and <code>Invert</code>."
51605161
},
51615162
"BootstrapBlazor.Server.Components.Samples.Table.TablesColumnTemplate": {
51625163
"TablesColumnTitle": "Table Column",

‎src/BootstrapBlazor.Server/Locales/zh-CN.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5156,7 +5156,8 @@
51565156
"VisibleP3": "此例中 <b>数量</b> 列通过设置 <code>Visible</code> 未显示，可以通过列控制按钮进行显示设置",
51575157
"VisibleP4": "更改 <b>列</b> 状态后触发 <code>OnColumnVisibleChanged</code> 回调委托",
51585158
"ResetVisibleColumnsButtonText": "设置列隐藏信息",
5159-
"ResetVisibleColumnsDesc": "通过调用 <code>Table</code> 实例方法 <code>ResetVisibleColumns</code> 可设置任意列显示隐藏属性"
5159+
"ResetVisibleColumnsDesc": "通过调用 <code>Table</code> 实例方法 <code>ResetVisibleColumns</code> 可设置任意列显示隐藏属性",
5160+
"ShowColumnListControlsDesc": "通过设置 <code>ShowColumnListControls</code> 控制列下拉框是否显示控制按钮，内置控制按钮有 <code>全选</code> 与 <code>反选</code> 两个按钮"
51605161
},
51615162
"BootstrapBlazor.Server.Components.Samples.Table.TablesColumnTemplate": {
51625163
"TablesColumnTitle": "Table 表格",

‎src/BootstrapBlazor/Components/Table/Table.razor‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@namespace BootstrapBlazor.Components
1+
@namespace BootstrapBlazor.Components
22
@using Microsoft.AspNetCore.Components.Web.Virtualization
33
@typeparam TItem
44
@inherits BootstrapModuleComponentBase
@@ -14,7 +14,7 @@
1414
{
1515
<SkeletonTable ShowToolbar="@ShowToolbar"></SkeletonTable>
1616
}
17-
else if(ShowLoadingInFirstRender)
17+
else if (ShowLoadingInFirstRender)
1818
{
1919
<div class="table-loading">
2020
@if (LoadingTemplate is not null)
@@ -117,16 +117,29 @@
117117
<span class="d-none d-sm-inline-block">@ColumnButtonText</span>
118118
<span class="caret"></span>
119119
</button>
120-
<div class="dropdown-menu dropdown-menu-end shadow">
121-
@foreach (var item in _visibleColumns)
120+
<div class="@DropdownListClassString">
121+
@if (ShowColumnListControls)
122122
{
123-
<div class="dropdown-item">
124-
<Checkbox ShowAfterLabel="true" DisplayText="@item.DisplayName"
125-
IsDisabled="@GetColumnsListState(item)"
126-
@bind-Value="@item.Visible"
127-
OnValueChanged="visible => OnToggleColumnVisible(item.Name, visible)">
128-
</Checkbox>
123+
<div class="column-list-controls">
124+
<Button Text="@Localizer["ColumnListSelectAllText"]" Size="Size.ExtraSmall"
125+
OnClick="TriggerSelectAllColumnList"></Button>
126+
<Button Text="@Localizer["ColumnListSelectInvertText"]" Size="Size.ExtraSmall"
127+
OnClick="TriggerSelectInvertColumnList" class="ms-2"></Button>
129128
</div>
129+
<Divider />
130+
<div class="column-list-items">
131+
@foreach (var item in _visibleColumns)
132+
{
133+
@RenderColumnListItem(item)
134+
}
135+
</div>
136+
}
137+
else
138+
{
139+
@foreach (var item in _visibleColumns)
140+
{
141+
@RenderColumnListItem(item)
142+
}
130143
}
131144
</div>
132145
</div>
@@ -253,7 +266,7 @@
253266
{
254267
foreach (var item in Rows)
255268
{
256-
OnBeforeRenderRow?.Invoke(item);
269+
OnBeforeRenderRow?.Invoke(item);
257270
if (RowTemplate != null)
258271
{
259272
var columns = GetVisibleColumns();
@@ -1131,4 +1144,12 @@
11311144
GotoNavigatorLabelText="@GotoNavigatorLabelText"
11321145
ShowPageInfo="ShowPageInfo" PageInfoTemplate="InternalPageInfoTemplate"/>;
11331146

1147+
RenderFragment<ColumnVisibleItem> RenderColumnListItem => item =>
1148+
@<div class="dropdown-item">
1149+
<Checkbox ShowAfterLabel="true" DisplayText="@item.DisplayName"
1150+
IsDisabled="@GetColumnsListState(item)"
1151+
@bind-Value="@item.Visible"
1152+
OnValueChanged="visible => OnToggleColumnVisible(item.Name, visible)">
1153+
</Checkbox>
1154+
</div>;
11341155
}

‎src/BootstrapBlazor/Components/Table/Table.razor.Checkbox.cs‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Licensed to the .NET Foundation under one or more agreements.
1+
// Licensed to the .NET Foundation under one or more agreements.
22
// The .NET Foundation licenses this file to you under the Apache 2.0 License
33
// See the LICENSE file in the project root for more information.
44
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -173,4 +173,25 @@ private async Task OnToggleColumnVisible(string columnName, bool visible)
173173
await OnColumnVisibleChanged(columnName, visible);
174174
}
175175
}
176+
177+
private void TriggerSelectAllColumnList()
178+
{
179+
foreach (var column in _visibleColumns)
180+
{
181+
column.Visible = true;
182+
}
183+
}
184+
185+
private void TriggerSelectInvertColumnList()
186+
{
187+
foreach (var column in _visibleColumns)
188+
{
189+
column.Visible = !column.Visible;
190+
}
191+
192+
if (_visibleColumns.All(i => i.Visible == false))
193+
{
194+
_visibleColumns.First().Visible = true;
195+
}
196+
}
176197
}

‎src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Licensed to the .NET Foundation under one or more agreements.
1+
// Licensed to the .NET Foundation under one or more agreements.
22
// The .NET Foundation licenses this file to you under the Apache 2.0 License
33
// See the LICENSE file in the project root for more information.
44
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -7,10 +7,6 @@
77

88
namespace BootstrapBlazor.Components;
99

10-
/// <summary>
11-
///
12-
/// </summary>
13-
/// <typeparam name="TItem"></typeparam>
1410
public partial class Table<TItem>
1511
{
1612
/// <summary>

‎src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Licensed to the .NET Foundation under one or more agreements.
1+
// Licensed to the .NET Foundation under one or more agreements.
22
// The .NET Foundation licenses this file to you under the Apache 2.0 License
33
// See the LICENSE file in the project root for more information.
44
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -310,6 +310,12 @@ public Func<TItem, bool>? ShowDeleteButtonCallback
310310
[Parameter]
311311
public bool ShowColumnList { get; set; }
312312

313+
/// <summary>
314+
/// 获得/设置 列选择下拉框中是否显示控制功能按钮默认为 false 不显示
315+
/// </summary>
316+
[Parameter]
317+
public bool ShowColumnListControls { get; set; }
318+
313319
/// <summary>
314320
/// 获得/设置 列选择下拉框图标
315321
/// </summary>

‎src/BootstrapBlazor/Components/Table/Table.razor.cs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -814,6 +814,10 @@ public async Task ExpandDetailRow(TItem item)
814814

815815
private bool _isFilterTrigger;
816816

817+
private string? DropdownListClassString => CssBuilder.Default("dropdown-menu dropdown-menu-end shadow")
818+
.AddClass("dropdown-menu-controls", ShowColumnListControls)
819+
.Build();
820+
817821
/// <summary>
818822
/// OnInitialized 方法
819823
/// </summary>
@@ -1044,7 +1048,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
10441048

10451049
if (_resetColDragListener)
10461050
{
1047-
_resetColDragListener= false;
1051+
_resetColDragListener = false;
10481052
await InvokeVoidAsync("resetColDragListener", Id);
10491053
}
10501054

‎src/BootstrapBlazor/Components/Table/Table.razor.scss‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -308,8 +308,23 @@
308308
}
309309

310310
.table-toolbar .dropdown-column .dropdown-menu {
311-
max-height: var(--bb-table-columnlist-max-height);
312-
overflow: auto;
311+
312+
&:not(.dropdown-menu-controls) {
313+
max-height: var(--bb-table-columnlist-max-height);
314+
overflow: auto;
315+
}
316+
317+
.column-list-controls {
318+
display: flex;
319+
flex-wrap: nowrap;
320+
padding: 0 var(--bs-dropdown-item-padding-x);
321+
margin-block-end: .5rem;
322+
}
323+
324+
.column-list-items {
325+
max-height: var(--bb-table-columnlist-max-height);
326+
overflow: auto;
327+
}
313328
}
314329

315330
.table-toolbar .dropdown-menu .dropdown-item span {

‎src/BootstrapBlazor/Locales/en.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{
1+
{
22
"BootstrapBlazor.Components.AutoComplete": {
33
"NoDataTip": "No Data",
44
"PlaceHolder": "Please Input"
@@ -254,7 +254,9 @@
254254
"AlignCenterText": "Center",
255255
"AlignCenterTooltipText": "Click to align text in this column to the center",
256256
"AlignRightText": "Right",
257-
"AlignRightTooltipText": "Click to align text in this column to the right"
257+
"AlignRightTooltipText": "Click to align text in this column to the right",
258+
"ColumnListSelectAllText": "All",
259+
"ColumnListSelectInvertText": "Invert"
258260
},
259261
"BootstrapBlazor.Components.EditDialog": {
260262
"CloseButtonText": "Close",

0 commit comments

Comments
 (0)