Skip to content

Commit 986f8d5

Browse files
ArgoZhangArgoZhang
authored
feat(Table): multiple select column adapts to compact mode (#7068)
* refactor: 更新代码减少提示信息 * doc: 更新示例 * feat: 多选列增加默认居中逻辑 * test: 更新单元测试 * chore: bump version 9.12.2-beta02 * revert: 撤销更改 * refactor: 调整紧凑模式下左右间距 * refactor: 调整紧凑模式下复选框宽度 * refactor: 精简代码 * feat: 增加 CheckboxColumnCompactWidth 参数 * feat: 使用 CheckboxColumnCompactWidth 值渲染选择列宽度 * test: 增加单元测试 * refactor: 增加 CheckboxColumnCompactWidth 参数 * test: 增加单元测试 * test: 增加单元测试 * test: 更新单元测试 * doc: 代码格式化
1 parent e212123 commit 986f8d5

File tree

9 files changed

+89
-25
lines changed

9 files changed

+89
-25
lines changed

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

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/table"
1+
@page "/table"
22
@inject IStringLocalizer<NavMenu> NavMenuLocalizer
33
@inject IStringLocalizer<Tables> Localizer
44
@inject IStringLocalizer<Foo> FooLocalizer
@@ -7,11 +7,11 @@
77
<h4>@Localizer["TableBaseDescription"]</h4>
88

99
<Tips Color="Color.Success">
10-
<p>表格功能比较多，参数也非常多，示例更多，各个功能详细用法建议查看下方视频讲解 <b>鞠佬</b> 有专门的视频讲解</p>
11-
<ul class="ul-demo">
12-
<li>鞠佬 BootstrapBlazor Table 系列 <a href="https://space.bilibili.com/2060594/lists/4298264?type=season">[传送门]</a></li>
13-
<li>官网 组件讲解合集 <a href="https://space.bilibili.com/660853738/lists">[传送门]</a></li>
14-
</ul>
10+
<p>表格功能比较多，参数也非常多，示例更多，各个功能详细用法建议查看下方视频讲解 <b>鞠佬</b> 有专门的视频讲解</p>
11+
<ul class="ul-demo">
12+
<li>鞠佬 BootstrapBlazor Table 系列 <a href="https://space.bilibili.com/2060594/lists/4298264?type=season">[传送门]</a></li>
13+
<li>官网 组件讲解合集 <a href="https://space.bilibili.com/660853738/lists">[传送门]</a></li>
14+
</ul>
1515
</Tips>
1616

1717
<Tips>
@@ -68,8 +68,16 @@
6868
<DemoBlock Title="@Localizer["TableBaseSizeTitle"]"
6969
Introduction="@Localizer["TableBaseSizeIntro"]"
7070
Name="TableSize">
71-
<section ignore>@((MarkupString)Localizer["TableBaseSizeDescription"].Value)</section>
72-
<Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" IsStriped="true" TableSize="TableSize.Compact">
71+
<section ignore>
72+
<p>@((MarkupString)Localizer["TableBaseSizeDescription"].Value)</p>
73+
<div class="row g-3">
74+
<div class="col-12 col-sm-6">
75+
<Switch @bind-Value="@_isCompact" DisplayText="TableSize" />
76+
</div>
77+
</div>
78+
</section>
79+
<Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" IsStriped="true"
80+
TableSize="@(_isCompact ? TableSize.Compact : TableSize.Normal)" IsMultipleSelect="true">
7381
<TableColumns>
7482
<TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" Sortable="true" />
7583
<TableColumn @bind-Field="@context.Name" Filterable="true" />

‎src/BootstrapBlazor.Server/Components/Samples/Table/Tables.razor.cs‎

Lines changed: 3 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([email protected]) Website: https://www.blazor.zone
@@ -21,6 +21,8 @@ public partial class Tables
2121
[NotNull]
2222
private string? RefreshText { get; set; }
2323

24+
private bool _isCompact = true;
25+
2426
/// <summary>
2527
/// OnInitialized
2628
/// </summary>

‎src/BootstrapBlazor/BootstrapBlazor.csproj‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<Project Sdk="Microsoft.NET.Sdk.Razor">
1+
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup Condition="'$(VisualStudioVersion)' == '17.0'">
4-
<Version>9.12.2-beta01</Version>
4+
<Version>9.12.2-beta02</Version>
55
</PropertyGroup>
66

77
<PropertyGroup Condition="'$(VisualStudioVersion)' == '18.0'">
8-
<Version>10.0.0-rc.2.2.3</Version>
8+
<Version>10.0.0-rc.2.2.4</Version>
99
</PropertyGroup>
1010

1111
<ItemGroup>

‎src/BootstrapBlazor/Components/ErrorLogger/ErrorLogger.cs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,9 @@ protected override async Task OnInitializedAsync()
102102
protected override void BuildRenderTree(RenderTreeBuilder builder)
103103
{
104104
builder.OpenComponent<CascadingValue<IErrorLogger>>(0);
105-
builder.AddAttribute(1, nameof(CascadingValue<IErrorLogger>.Value), this);
106-
builder.AddAttribute(2, nameof(CascadingValue<IErrorLogger>.IsFixed), true);
107-
builder.AddAttribute(3, nameof(CascadingValue<IErrorLogger>.ChildContent), RenderContent);
105+
builder.AddAttribute(1, nameof(CascadingValue<>.Value), this);
106+
builder.AddAttribute(2, nameof(CascadingValue<>.IsFixed), true);
107+
builder.AddAttribute(3, nameof(CascadingValue<>.ChildContent), RenderContent);
108108
builder.CloseComponent();
109109
}
110110

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

Lines changed: 9 additions & 3 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([email protected]) Website: https://www.blazor.zone
@@ -175,7 +175,10 @@ private int MultipleSelectColumnLeft()
175175

176176
private string? MultiColumnStyleString => GetFixedMultipleSelectColumn ? $"left: {MultipleSelectColumnLeft()}px;" : null;
177177

178-
private int MultiColumnWidth => ShowCheckboxText ? ShowCheckboxTextColumnWidth : CheckboxColumnWidth;
178+
private int MultiColumnWidth => ShowCheckboxText ? ShowCheckboxTextColumnWidth :
179+
TableSize == TableSize.Normal
180+
? CheckboxColumnWidth
181+
: CheckboxColumnCompactWidth;
179182

180183
/// <summary>
181184
/// 获得指定列头固定列样式
@@ -290,7 +293,10 @@ private int CalcMargin()
290293
}
291294
if (IsMultipleSelect)
292295
{
293-
margin += ShowCheckboxText ? ShowCheckboxTextColumnWidth : CheckboxColumnWidth;
296+
margin += ShowCheckboxText ? ShowCheckboxTextColumnWidth :
297+
TableSize == TableSize.Normal
298+
? CheckboxColumnWidth
299+
: CheckboxColumnCompactWidth;
294300
}
295301
if (ShowLineNo)
296302
{

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

Lines changed: 12 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([email protected]) Website: https://www.blazor.zone
@@ -339,6 +339,12 @@ private string GetSortTooltip(ITableColumn col) => SortName != col.GetFieldName(
339339
[Parameter]
340340
public int CheckboxColumnWidth { get; set; }
341341

342+
/// <summary>
343+
/// 获得/设置 紧凑模式下复选框宽度 默认 28
344+
/// </summary>
345+
[Parameter]
346+
public int CheckboxColumnCompactWidth { get; set; }
347+
342348
/// <summary>
343349
/// 获得/设置 行号列宽度 默认 60
344350
/// </summary>
@@ -880,6 +886,11 @@ private void OnInitParameters()
880886
CheckboxColumnWidth = op.TableSettings.CheckboxColumnWidth;
881887
}
882888

889+
if (CheckboxColumnCompactWidth == 0)
890+
{
891+
CheckboxColumnCompactWidth = op.TableSettings.CheckboxColumnCompactWidth;
892+
}
893+
883894
if (op.TableSettings.TableRenderMode != null && RenderMode == TableRenderMode.Auto)
884895
{
885896
RenderMode = op.TableSettings.TableRenderMode.Value;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.table-container {
1+
.table-container {
22
--bb-table-td-padding-x: .5rem;
33
--bb-table-td-padding-y: .5rem;
44
--bb-table-cardview-label-width: 30%;
@@ -72,7 +72,7 @@
7272
}
7373

7474
.table-sm {
75-
--bb-table-td-padding-x: .25rem;
75+
--bb-table-td-padding-x: .35rem;
7676
--bb-table-td-padding-y: .25rem;
7777
}
7878

‎src/BootstrapBlazor/Options/TableSettings.cs‎

Lines changed: 6 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([email protected]) Website: https://www.blazor.zone
@@ -15,6 +15,11 @@ public class TableSettings
1515
/// </summary>
1616
public int CheckboxColumnWidth { get; set; } = 36;
1717

18+
/// <summary>
19+
/// 获得/设置 复选框宽度 默认 28
20+
/// </summary>
21+
public int CheckboxColumnCompactWidth { get; set; } = 28;
22+
1823
/// <summary>
1924
/// 获得/设置 明细行 Row Header 宽度 默认 24
2025
/// </summary>

‎test/UnitTest/Components/TableTest.cs‎

Lines changed: 35 additions & 3 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([email protected]) Website: https://www.blazor.zone
@@ -1731,7 +1731,7 @@ public void FixedColumn_Ok()
17311731
builder.OpenComponent<TableColumn<Foo, string>>(0);
17321732
builder.AddAttribute(1, "Field", foo.Name);
17331733
builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
1734-
builder.AddAttribute(3, nameof(TableColumn<Foo, string>.Fixed), true);
1734+
builder.AddAttribute(3, nameof(TableColumn<,>.Fixed), true);
17351735
builder.CloseComponent();
17361736
});
17371737
pb.Add(a => a.DetailRowTemplate, foo => builder =>
@@ -1972,6 +1972,13 @@ public void FixedMultipleColumn_Ok()
19721972
});
19731973
});
19741974
Assert.Contains("left: 36px;", cut.Markup);
1975+
1976+
var table = cut.FindComponent<Table<Foo>>();
1977+
table.SetParametersAndRender(pb =>
1978+
{
1979+
pb.Add(a => a.TableSize, TableSize.Compact);
1980+
});
1981+
Assert.Contains("left: 28px;", cut.Markup);
19751982
}
19761983

19771984
[Theory]
@@ -2650,7 +2657,7 @@ public void ToolbarButton_Ok()
26502657
pb.Add(a => a.TableToolbarTemplate, builder =>
26512658
{
26522659
builder.OpenComponent<TableToolbarButton<Foo>>(0);
2653-
builder.AddAttribute(1, nameof(TableToolbarButton<Foo>.Text), "test-after");
2660+
builder.AddAttribute(1, nameof(TableToolbarButton<>.Text), "test-after");
26542661
builder.CloseComponent();
26552662
});
26562663
pb.Add(a => a.TableToolbarBeforeTemplate, builder =>
@@ -3257,6 +3264,30 @@ public void ShowFilterHeader_Ok(bool showCheckboxText)
32573264
});
32583265
});
32593266
});
3267+
3268+
if (showCheckboxText == false)
3269+
{
3270+
cut.Contains("width: 36px;");
3271+
}
3272+
else
3273+
{
3274+
cut.Contains("width: 80px;");
3275+
}
3276+
3277+
var table = cut.FindComponent<Table<Foo>>();
3278+
table.SetParametersAndRender(pb =>
3279+
{
3280+
pb.Add(a => a.TableSize, TableSize.Compact);
3281+
});
3282+
3283+
if (showCheckboxText == false)
3284+
{
3285+
cut.Contains("width: 28px;");
3286+
}
3287+
else
3288+
{
3289+
cut.Contains("width: 80px;");
3290+
}
32603291
}
32613292

32623293
[Theory]
@@ -7390,6 +7421,7 @@ public void TableSize_Ok()
73907421
{
73917422
pb.Add(a => a.RenderMode, TableRenderMode.Table);
73927423
pb.Add(a => a.TableSize, TableSize.Normal);
7424+
pb.Add(a => a.IsMultipleSelect, true);
73937425
pb.Add(a => a.OnQueryAsync, OnQueryAsync(localizer));
73947426
pb.Add(a => a.TableColumns, foo => builder =>
73957427
{

0 commit comments

Comments
 (0)